我正在尝试让我自己的图像 slider 以 4000 毫秒的间隔自动播放。我尝试过使用 setTimeout
但我似乎无法让它工作。如果有人能帮助我,我将不胜感激。这是 slider 的示例:
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'})
}
};
});
谢谢, 马修
最佳答案
结合使用 setTimeout 和递归,我能够设置运行得非常好的自动播放。
我给了nextimage()
函数一个参数autoplay
,它是一个 bool 值。然后我在函数末尾添加了以下行:
if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); }
最后我在脚本末尾添加了这一行,以使自动播放循环继续:
setTimeout(function() { nextimage(true); }, 4000);
查看此处的演示,主要是根据您提供的内容构建的,并进行了一些修改以进行自动播放:http://jsfiddle.net/bVjkP/
简而言之,您将一个 bool 值传递给 nextimage() 函数,以告诉它是否开始自动播放。然后,您只需调用初始 setTimeout 即可开始工作。这个方法的技巧在于,你必须通过setTimeout调用一个匿名函数,该函数会在autoplay设置为true的情况下调用nextimage函数,因为用setTimeout调用函数时不能传递参数。这类似于使用 jQuery 将函数绑定(bind)到单击或悬停等事件的方法。
关于jquery - 获取图像 slider 以自动播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3497798/