Question

我试图让自己的图像滑块以4000毫秒的间隔自动播放。我尝试过使用setTimeout，但似乎无法让它发挥作用。如果有人可以帮助我，我将不胜感激。以下是滑块的示例：

http://www.matthewruddy.com/slider-intervalissue/

我有什么想法让它自动播放？

这是jQuery代码：

$(document).ready(function(){
    var images = $('.slider li');
    var slides = images.length;
    var sliderwidth = 500;
    var currentimage = 0;
    var containerwidth =  sliderwidth*slides;
    var autoplay = 4000;

    $('.slider').css('width', containerwidth);

    $('#next').bind('click',nextimage);

    function nextimage(){
        if(currentimage<slides-1){
            currentimage++;
            $('.slider').animate({left:-sliderwidth*(currentimage)},{duration:800,easing:'easeInOutCubic'});
        }
        else{
            currentimage = 0;
            $('.slider').animate({left:0},{duration:800,easing:'easeInOutCubic'})
        }
    };

});

谢谢，马修

Answer 1

我能够使用setTimeout和递归的组合设置一个非常好的自动播放。

我给nextimage()函数一个参数autoplay，这是一个布尔值。然后我在函数末尾添加了以下行：

if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); }

最后，我在脚本的末尾添加了这一行，以使自动播放循环继续：

setTimeout(function() { nextimage(true); }, 4000);

查看此处的演示，主要根据您提供的内容构建，并进行一些修改以进行自动播放：http://jsfiddle.net/bVjkP/

简而言之，您将一个布尔值传递给nextimage（）函数，告诉它是否开始自动播放。然后你只需调用一个初始的setTimeout来让球滚动。使用此方法的技巧是您必须通过setTimeout调用匿名函数，该函数调用nextimage函数并将autoplay设置为true，因为在使用setTimeout调用函数时无法传递参数。这类似于使用jQuery将函数绑定到事件（例如单击或悬停）的方法。

获取图像滑块以自动播放

1 个答案: