從頭開始構建一個jQuery幻燈片

我試圖從頭開始構建一個自動播放幻燈片，對於我正在進行的網站以及作爲學習練習來說都是如此。因此，我想學習如何自己做，而不是訴諸於使用插件或許多優秀的免費幻燈片之一。下面是我到目前爲止有： http://jsfiddle.net/mandrill/zTdxs/15/從頭開始構建一個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; 
    }); 
});

它目前只是一個幻燈片和其他所有的幻燈片之間切換。我如何才能讓它在循環中循環播放幻燈片？

來源

2013-02-21 mandrill

有搜索一些教程，[這裏有一個]（http://www.crosscode.co.uk/jquery/jquery-carousel-tutorial/），看起來像它可以做你想做的，如果你改變定時器爲旋轉的點擊事件。 – RandomCoder 2013-02-21 14:05:52

我想出瞭如何去做。我對環路缺乏瞭解是我的失敗。 .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-22 11:36:09 mandrill

我已經使用上面的代碼，對下一個和上一個按鈕進行了小的編輯（僅在我的本地測試頁上，對不起），並添加了一個計時器：http://jsfiddle.net/mandrill/nuQVJ/8/。下一步：暫停並播放按鈕。 – mandrill 2013-02-22 12:25:11

與任何代碼一樣，如果您不確定如何去做（但正在尋找學習體驗），那麼沒有更好的學習方法來查看已寫入的實時代碼。獲取您找到並閱讀代碼的幾個幻燈片的（未縮小）版本。

我最喜歡的幻燈片插件是cycle一個 - 有一個簡易版本具有相當可讀的代碼：http://malsup.github.com/jquery.cycle.lite.js

爲了給您提供更具體的回答特定的問題，您可以重置指數回到起點。

來源

2013-02-21 15:26:55 LeonardChallis

從頭開始構建一個jQuery幻燈片

回答

相關問題