jQuery滾動SlideShow

Question

我目前正在從頭創建一個滾動幻燈片，並且遇到了問題。

當我按下一個按鈕多次，幻燈片開始跑起來，我怎麼才能確保下一張幻燈片等待當前幻燈片下一個開始前停止。

var scrollAmount=910 
    var image0Left=-scrollAmount; 
    var image1Left=0; 
    var image2Left=scrollAmount; 
    var scrollSpeed0=2000; 
    var scrollSpeed1=2000; 
    var scrollSpeed2=2000; 
    $(document).ready(function() { 
     $("#left-arrow").click(showPreviousSlide); 
     $("#right-arrow").click(showNextSlide); 
    }); 

    function showPreviousSlide(){ 
     image0Left+=scrollAmount; 
     if(image0Left > scrollAmount){ 
      image0Left=-scrollAmount; 
      scrollSpeed0=0; 
     } 

     image1Left+=scrollAmount; 
     if(image1Left > scrollAmount){ 
      image1Left=-scrollAmount; 
      scrollSpeed1=0; 
     } 

     image2Left+=scrollAmount; 
     if(image2Left > scrollAmount){ 
      image2Left=-scrollAmount; 
      scrollSpeed2=0; 
     } 

     $("#slide0").animate({left: image0Left}, scrollSpeed0); 
     scrollSpeed0=2000; 
     $("#slide1").animate({left: image1Left}, scrollSpeed1); 
     scrollSpeed1=2000; 
     $("#slide2").animate({left: image2Left}, scrollSpeed2); 
     scrollSpeed2=2000; 
    } 

    function showNextSlide() { 
     image0Left-=scrollAmount; 
     if(image0Left < -scrollAmount){ 
      image0Left=scrollAmount; 
      scrollSpeed0=0; 
     } 

     image1Left-=scrollAmount; 
     if(image1Left < -scrollAmount){ 
      image1Left=scrollAmount; 
      scrollSpeed1=0; 
     } 

     image2Left-=scrollAmount; 
     if(image2Left < -scrollAmount){ 
      image2Left=scrollAmount; 
      scrollSpeed2=0; 
     } 


     $("#slide0").animate({left: image0Left}, scrollSpeed0); 
     scrollSpeed0=2000; 
     $("#slide1").animate({left: image1Left}, scrollSpeed1); 
     scrollSpeed1=2000; 
     $("#slide2").animate({left: image2Left}, scrollSpeed2); 
     scrollSpeed2=2000; 
    } 

這就是所有的控制腳本代碼。這是一個到實際網站的鏈接。 Site

有跡象表明，在每次showPreviousSlide或showNextSlide被稱爲時間移動的三個圖像的幻燈片。如何確保showPreviousSlide/showNextSlide函數的一次迭代在我的幻燈片再次被調用之前完成移動？我刪除了我的幻燈片div overfill：hidden，以便更容易看到我的幻燈片上正在發生的事情。

謝謝你的幫助。

摩根

Answer 1

你可以通過完成回調到.animate()這樣的：

animationCompleted = false; 
$("#slide0").animate({left: image0Left}, scrollSpeed0, function() { 
    animationCompleted = true; 
}); 

然後檢查的animationCompleted值在你的函數：

function showPreviousSlide(){ 
    if (!animationCompleted) return; 
    // ... 
} 

並檢查了docs附加信息和例子。