我一直坐在这里几个小时,无法解决这个问题。我正在尝试创建一个无休止地循环播放的幻灯片(3张幻灯片)。每张幻灯片都在#slideshow里面。我已经使用调试器完成了这个并且所有变量都设置正确,但我不明白为什么动画实际上不会发生。我有这个,最终显示页面上的所有图像:
$(document).ready(function() {
$slideshow = $('#slideshow');
$slideshowItems = $slideshow.find('li');
$slideshowItems.hide();
nextI = function(x) {
if ((x+1) < $slideshowItems.length) {
return x+1;
}
else {
return 0;
}
}
animation = function(i) {
$slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, animation(nextI(i)));
}
animation(0);
如果我这样做:
$slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500,
$slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500,
$slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500));
这可以按预期工作,但看起来很难看,并且不会循环。
知道为什么我不能让这个工作吗?我觉得这是我对JQuery / JS如何修改DOM或浏览器用于执行动画的序列的期望。谢谢你的帮助!
答案 0 :(得分:5)
var $slideshowItems = $('#slideshow').find('li'),
i = 0;
(function loop() {
$slideshowItems.eq( i ).fadeIn(500).delay(1000).fadeOut(500, loop);
i = ++i % $slideshowItems.length;
})();
<强> JSFIDDLE DEMO 强>
答案 1 :(得分:1)
你应该指定一个回调方法,但你的“动画(nextI(i))”什么都不返回,所以在淡出完成后没有什么可做的。
我想这样的事情会起作用:
var animation = function(i) {
$slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, function (){
animation(nextI(i));
});
}
答案 2 :(得分:-1)
我会尝试将其设置为函数,然后使用setInterval:
setInterval(function(){
$slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500, function() {
$slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500, function() {
$slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500);
});
});
}, 6000); // 6000 milliseconds before loops