jquery - 无限幻灯片功能

Question

我正在尝试使用 jQuery 创建一个基本的幻灯片放映，以便在未来的元素中使用。我已经对函数进行了排序，以便 div(将是图像，但现在并不重要)都在正确的时间淡入淡出。但是我不知道如何重复。

这是我的 jQuery:

$(document).ready(function() {
    $(".slide").hide();
    var $slideshow = function() {
        $("#one").fadeIn("slow").delay(5000).fadeOut("slow");
        $("#two").delay(5000).fadeIn("slow").delay(5000).fadeOut("slow");
        $("#three").delay(10000).fadeIn("slow").delay(5000).fadeOut("slow");
        $("#four").delay(15000).fadeIn("slow").delay(5000).fadeOut("slow");
        $("#five").delay(20000).fadeIn("slow").delay(5000).fadeOut("slow");
    };
    $slideshow();
});

我尝试添加 $slideshow();在函数的末尾，但结果确实有问题；加载大约需要 10 秒，而且时间/顺序不正确。

这里是一个 jsfiddle 以使其更易于查看:http://jsfiddle.net/HamishT/8PTCf/

另外，这是最有效的方法吗？它看起来像是一个基本功能的大量代码。

Answer 1

这是我使用 setInterval 使用的一个 super 简单的方法。您还可以添加幻灯片，只需将 if (n > 5) 5 更改为幻灯片的最大数量。它只是向上计数，当它达到最大值时，重置回 1。这是一个 jFiddle

$(document).ready(function() {
$(".slide").hide();
var $slideshow = function() {
    var n = 1;
    setInterval(function(){
        $(".slide").fadeOut();
        $("#slide-"+n).fadeIn();
        n = n+1;
        if(n > 5){
            n = 1;
        }
    },3500);
};
    $slideshow();
});