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附加信息和例子。