3

我正在尝试从头开始构建一个自动播放的幻灯片，既适用于我正在开发的网站，也适用于学习练习。因此，我想自己学习如何做，而不是求助于使用插件或许多优秀的免费幻灯片之一。这是我到目前为止所得到的：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;
    });
});

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

4

2 回答 2

1

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

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

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

于 2013-02-21T15:26:55.273 回答
1

我想出了怎么做。我对循环缺乏了解是我的失败。.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/

感谢大家的意见:) 下一步：让它自动播放并添加一个计时器......

于 2013-02-22T11:36:09.133 回答