setinterval（）とclearinterval（） - クリアされたときに自動的にアニメーションされない

Question

アニメーションの背景イメージを構築しようとしています。

ページ上のナビゲーション要素をクリックすると、サイクルが一時停止するという考えもあります。

ホームボタンをクリックすると、（現在の画像から）サイクルが再び開始されます。

これは現在の状態では機能しますが、再発火時にサイクルが自動的に行われるのではなく、各フェード/スライド/何でもホームボタンを押す必要があります。次のように

スクリプトは次のとおりです。

$(document).ready(function(){ 

    var imgArr = new Array(
     'img/slides/slide1.jpg', 
     'img/slides/slide2.jpg', 
     'img/slides/slide3.jpg'); 

    var preloadArr = new Array(); 
    var i; 


    // Preload 
    for(i=0; i < imgArr.length; i++){ 
     preloadArr[i] = new Image(); 
     preloadArr[i].src = imgArr[i]; 
    } 

    var currImg = 1; 
    var IntID = setInterval(startSlider, 4000); 

    // Image Rotator 

    function startSlider(){ 
     $('.mainbg').animate({opacity: 0}, 1200, "easeInOutExpo", function(){ 
      $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src + ') no-repeat center center fixed'); 
      $(this).css({'background-size': 'cover' , '-webkit-background-size': 'cover' , '-moz-background-size': 'cover' , '-o-background-size': 'cover' ,}); 
      }).animate({opacity: 1}, 1200, "easeInOutExpo"); 
     } 

    function stopSlider() { 
     clearInterval(IntID); 
    } 

    $(".topnav ul li a").click(stopSlider); 

    $("#home").click(startSlider); 
}); 

誰かがこれで正しい方向に私を指すしてくださいすることができれば、それは非常に理解されるだろう！最高の、カスパー。

Answer 1

これはあなたのために行う必要があります。

var IntID = setTimer(); 

function setTimer(){ 
    i = setInterval(startSlider, 4000); 
    return i; 
} 

function stopSlider() { 
    clearInterval(IntID); 
} 

//Restart Timer 
// Option 1 make a restartSlider function and call it 
$("#home").click(restartSlider); 
function restartSlider(){ 
     IntID = setTimer(); 
} 

//Option 2 create an anonymous function only for that click event. 
$("#home").click(function(){ 
    IntID = setTimer(); 
});