jquery - 使用 jQuery 无限循环 4 个图像

Question

我有下一个代码:

$(document).ready(function () {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
});

它更像是 jQuery 的 Playground 。嗯，首先我想让第一张图像淡入，然后是第二张图像，然后是最后一张图像。此后，我希望所有图像在加载后淡出。

但我正在考虑两个新问题:

1. 创建无限循环

2. 使用超过 3 个图像，但一次仅显示 3 个(我意识到这可能会影响 id 更改为其他内容)

有什么想法吗？

我不会在这里发布我如何尝试实现循环，只有一种有趣的方法:

$(document).ready(function () {
    function runPics() {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
    } interval = setInterval(runPics, 3500);
});

这段代码很糟糕，对吧？ :P

Answer 1

我会做这样的事情:

$('document').ready(function() {
    var $imgs = $('#slideshow > img'), current = 0;

    var nextImage = function() {
        if (current >= $imgs.length) current = 0;
        $imgs.eq(current++).fadeIn(function() {
            $(this).delay(3000).fadeOut(nextImage);
        })
    };
    nextImage();
});

fiddle : http://jsfiddle.net/JbrXd/4/