Question

我正在尝试从头开始制作一个自动播放幻灯片，既适用于我正在制作的网站，也适用于学习练习。因此，我想学习如何自己做，而不是使用插件或许多优秀的免费幻灯片之一。这是我到目前为止所得到的： http://jsfiddle.net/mandrill/zTdxs/15/

继承人JS：

$("#s1").css("display", "block"); // displays slide one as default on page load
$("#slideshow").click(function () {
    $(".slide").each(function (index) {
        var n = index + 1;
        $("#s" + n).toggle("fade");
        return index;
    });
});

目前只是在幻灯片1和所有其他幻灯片之间切换。如何让它以连续循环的顺序循环播放幻灯片？

Answer 1

与任何一段代码一样，如果你不确定如何去做（但是正在寻找学习经验），那么就没有更好的学习方法来查看已经编写过的真实实时代码了。获取您找到的一些幻灯片的（未缩小版）版本并阅读代码。

我最喜欢的幻灯片插件是cycle插件 - 这是一个代码相当可读的简易版：http://malsup.github.com/jquery.cycle.lite.js

为了更具体地回答您的特定问题，您可以将索引重置为开头。

Answer 2

我想出了怎么做。我对循环缺乏了解是我的垮台。 .each（）函数不是必需的。这是工作JS：

$("#s1").css("display","block").addClass("active");
$("#slideshow").click(function(){
    var currentSlide =  $(".active").attr("id"); 
    if ($("#slideshow .slide:last").hasClass("active")) {
        $(".active").toggle("fade").removeClass("active");
        $("#slideshow .slide:first").toggle("fade").addClass("active");
    } else {
        $(".active").toggle("fade").removeClass("active");
        $("#"+currentSlide).next(".slide").toggle("fade").addClass("active");
    }
});

可以在这里看到：http://jsfiddle.net/mandrill/wLTns/6/

感谢所有人的投入:)下一步：让它自动播放并添加一个计时器......

从头开始构建jQuery幻灯片

2 个答案: