javascript - 从头开始构建 jQuery 幻灯片

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;
    });
});

目前只是在第一张幻灯片和所有其他幻灯片之间切换。如何让它在连续循环中按顺序循环播放幻灯片？

Answer 1

对于任何一段代码，如果您不确定如何去做(但正在寻找学习经验)，那么没有比查看已经编写的实时代码更好的学习方法了。获取您找到的一些幻灯片的(未缩小的)版本并阅读代码。

我最喜欢的幻灯片插件是 cycle 插件 - 有一个代码相当可读的轻量级版本:http://malsup.github.com/jquery.cycle.lite.js

要为您的特定问题提供更具体的答案，您可以将索引重置回开头。