Question

我一直坐在这里几个小时，无法解决这个问题。我正在尝试创建一个无休止地循环播放的幻灯片（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或浏览器用于执行动画的序列的期望。谢谢你的帮助！

Answer 1

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

Answer 2

你应该指定一个回调方法，但你的“动画（nextI（i））”什么都不返回，所以在淡出完成后没有什么可做的。

我想这样的事情会起作用：

var animation = function(i) {       
   $slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, function (){
      animation(nextI(i));
   });
}

Answer 3

我会尝试将其设置为函数，然后使用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

如何使用JQuery创建循环动画

3 个答案: