我尝试制作一个自动滑块,虽然看起来我的代码不起作用 - 它要么崩溃浏览器,要么只是执行速度非常快。
我一直在玩的是setTimeout
,但它似乎不适用于while循环。
var playSlider = true;
if(playSlider) {
var i = $('#sliderwrapper ul li:visible').attr('data-number');
var lengthLi = $('#sliderwrapper ul li').size();
while(i<=lengthLi) {
var x = i + 1;
setTimeout(function(){
$('#sliderwrapper ul li[data-number=' + i + ']').fadeOut(450);
$('#sliderwrapper ul li[data-number=' + x + ']').fadeIn(600);
}, 3000);
i++;
}
}
HTML:
<ul>
<li data-number="1" data-description="Buy now!"><img src="images/slider1.png" border="0"></li>
<li data-number="2" data-description="Buy later!"><img src="images/slider2.png" border="0"></li>
<li data-number="3"><img src="images/slider3.png" border="0"></li>
<li data-number="4"><img src="images/slider4.png" border="0"></li>
<li data-number="5"><img src="images/slider5.png" border="0"></li>
<li data-number="6"><img src="images/slider2.png" border="0"></li>
<li data-number="7"><img src="images/slider3.png" border="0"></li>
<li data-number="8"><img src="images/slider5.png" border="0"></li>
<li data-number="9"><img src="images/slider1.png" border="0"></li>
</ul>
答案 0 :(得分:2)
您可以使用.delay(“3000”)在JQuery命令之间暂停
答案 1 :(得分:1)
我改变了一些事情......
var playSlider = true;
if(playSlider) {
var i = $('#sliderwrapper ul li:visible').attr('data-number');
var lengthLi = $('#sliderwrapper ul li').length();
while(i <= lengthLi) {
var x = i + 1;
setTimeout(function(){
$('#sliderwrapper ul li[data-number=' + i + ']').fadeOut(450);
$('#sliderwrapper ul li[data-number=' + x + ']').fadeIn(600);
}, 3000 * i);
i++;
}
}
我将.size()
更改为.length()
以计算li元素(不推荐使用大小),然后我将超时更改为3000 * i
,否则它们都会淡出并显示3秒后,同时。
答案 2 :(得分:0)
然后有点递归会帮助你:
function rec(){
//your code and so on
setTimeout(function(){
rec();
},3000);
}
答案 3 :(得分:0)
的 LIVE DEMO 强>
var $li = $('#sliderwrapper ul li');
var N = $li.length;
var C = 0 ;
var intv ;
$li.hide().eq(C).show();
function loop(){
intv = setInterval(function(){
$li.eq( ++C % N ).fadeTo(500,1).siblings().fadeTo(500,0);
},3000);
}
loop();
$('#sliderwrapper').on('mouseenter mouseleave', function( e ){
var mEnt = e.type=='mouseenter' ? clearInterval( intv ) : loop() ;
});