如何使jQuery每个循环重复无限次
How to make jQuery each loop repeat infinite number of times
我正在尝试创建一个幻灯片,并在每个图像循环后重复each
循环。我已经尝试了所有的方法,但在循环通过每个图像后无法继续循环。请查看我的代码并在下面尝试。
有人有什么想法吗?什么都试过了。
html
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
js
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000 * index).fadeIn(3000).fadeOut();
});
if(index === 3){
index = 0;
}
}
test();
您应该在间隔后再次启动循环,而无需重置索引(这也完全不起作用)。
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000 * index).fadeIn(3000).fadeOut();
});
setTimeout(test,9400)
}
test();
由于有三个img,每个img显示的延迟为3000,而fadeOut默认情况下需要400毫秒,因此延迟应为:
3*3000+400=9400
请注意,每个下一个fadeIn都不等待上一个fade Out的完成,因此窃取了fade Out前两个400ms的延迟。
您最好的选择是使用promise:
function test() {
$("img").hide().each(function(index) {
$(this).delay(3000 * index).fadeIn(3000).fadeOut();
}).promise().done(test);
}
test();
-jsFiddle-
相关文章:
- 使用滚动溢出-x进行无限循环
- 从index.html调用函数,该函数无限循环
- 使用jQuery无限循环播放HTML页面幻灯片
- Grunt任务没有加载,获得无限循环
- 如何在不进入无限循环的情况下将网站重定向到Facebook画布URL
- Backbone+RequireJS+Mediator模式导致视图逻辑短路和无限循环
- jQuery无限循环,动画化许多项目
- 如何避免试图用php+jquery显示php起始页的无限循环
- 6502仿真增强型基本无限循环$C000至$E0ED
- Angular ngRoute导致无限循环和堆栈溢出
- Jquery:无限循环和暂停
- 数组数组:无限循环
- MeteorJS使用流星调用和流星方法时的无限循环
- 如何无限循环数据集字符串
- jquery在无限循环中运行
- 遍历对象会导致无限循环
- 为什么内部Javascript循环会阻止外部循环中断(即无限循环)
- 角度编译指令似乎进入了无限循环
- 显示随机数js的无限循环
- 无限循环一组图像