jQuery滚动SlideShow

Question

我目前正在创建一个滚动幻灯片从头开始，并遇到了一个问题。

当我多次按下next按钮时，幻灯片开始一起运行，如何确保下一张幻灯片等到当前幻灯片停止后才开始播放。

    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以获取更多信息和示例。