jQuery 滚动幻灯片

Posted

技术标签:

【中文标题】jQuery 滚动幻灯片【英文标题】:jQuery Scrolling SlideShow 【发布时间】:2012-04-24 04:12:19 【问题描述】:

我目前正在从头开始创建滚动幻灯片,但遇到了问题。

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

    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,以便更容易看到我的幻灯片上发生了什么。

感谢您的帮助。

摩根

【问题讨论】:

【参考方案1】:

您可以像这样将完成回调传递给.animate()

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

然后在你的函数中检查animationCompleted 的值:

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

查看docs 了解更多信息和示例。

【讨论】:

以上是关于jQuery 滚动幻灯片的主要内容,如果未能解决你的问题,请参考以下文章

jquery:谁能帮我把这个幻灯片修改成七张图片的,还要滚动方式换成向左滚动的,是就query+css做的。

jQuery Mobile 滑动错误 - 滚动正在进行中

到达最后一张幻灯片时,使用键盘左箭头键不应向左滚动

JQuery 工具可滚动:无法将超链接添加到图像

jQuery滑过2个div

10款流行的 jQuery 插件