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

現在、スライド 1 と他のすべてのスライドを切り替えています。連続ループでスライドを順番に循環させるにはどうすればよいですか?

4

2 に答える 2

1

他のコードと同様に、その方法がわからない場合（ただし、学習体験を探している場合）、すでに作成されている実際のライブコードを見るよりも優れた学習方法はありません。見つけたいくつかのスライドショーの（縮小されていない）バージョンを入手して、コードを読んでください。

私のお気に入りのスライドショープラグインはcycle1つです-かなり読みやすいコードを備えたライトバージョンがあります：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 に答える