Javascript 从头开始构建jQuery幻灯片

我正在尝试从头开始构建一个自动播放的幻灯片，既可以用于我正在开发的网站，也可以作为一个学习练习。因此，我想学习如何自己做，而不是求助于使用插件或许多优秀的免费幻灯片之一。以下是到目前为止我得到的信息：

以下是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;
    });
});

---

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

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

我最喜欢的幻灯片放映插件是<代码>循环一个-有一个轻量级的版本，代码可读性很好：

---

为了给您的特定问题提供更具体的答案，您可以将索引重置回起始位置。

我找到了方法。我对循环的缺乏理解是我的失败。.each（）函数不是必需的。以下是工作原理：

$("#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");
    }
});

在这里可以看到它的作用：

---

感谢所有人的输入：）下一步：使其自动播放并添加计时器…

搜索一些教程，如果您将计时器更改为旋转的单击事件，它看起来可以做您想要的事情。我使用了上面的代码，并对下一个和上一个按钮进行了少量编辑（抱歉，仅在我的本地测试页面上），并添加了一个计时器：。下一步：暂停和播放按钮。