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

在jquery中使用eq选择器

$(document).ready(function () {
    $(".slide").hide();
    var slideshow = function (val) {
        $(".slide:eq(" + val + ")").fadeIn("slow").delay(100).fadeOut("slow", function () {
         if ($(".slide").length - 1 > val) {
            slideshow(val + 1);
           }else{
             slideshow(0);
          }
        });


    }


    slideshow(0);
});

DEMO

Answer 2

这是一个我使用setInterval使用的超级简单的。您还可以添加幻灯片，只需将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();
});

Answer 3

这是一个无限版本，可以拍摄与指定slideContainer

中相同数量的幻灯片

$(document).ready(function () {
    $(".slide").hide();
    var duration = 500;
    var slideIterator = 0;
    var $slideshow = function (slideContainer) {
        if (slideIterator < $(slideContainer).children().length) {
            var slide = $($(slideContainer).children()[slideIterator]);
            slide.fadeIn("slow", function () {
                var that = this;
                setTimeout(function () {
                    $(that).fadeOut('slow', function () {
                        slideIterator++;
                        $slideshow(slideContainer);
                    });
                }, duration);
            });

        } else {
            slideIterator = 0;
            $slideshow(slideContainer);
        }
    }
    $slideshow('#slideshow');
});

演示：http://jsfiddle.net/robschmuecker/8PTCf/5/

无限幻灯片功能

3 个答案:

DEMO