我的第一個jQuery滑塊我需要一些建議請

我想從零開始構建自己的客戶滑塊，我非常瞭解jQuery的基礎知識。我的第一個jQuery滑塊我需要一些建議請

我想要完成的是以下內容：我想建立一個帶有評論段落的滑塊。我的控制將是「下一個」和「先行」，但我想動態地做到這一點。我不知道自從他們被從數據庫中取出後我會有多少段落。所以它可能是1或10，那是我的問題。我設法在click上顯示（）和隱藏（）我的div，但僅此而已。

這裏是我的基本代碼：

jQuery的

$("#testimonials").ready(function(){ 

$("#1").show(); 
$("#2").hide(); 
$("#3").hide(); 

    $("#next").click(function(){ 
    $("#1").hide(); 
    $("#2").show(); 
        }); 

    $("#prev").click(function(){ 
    $("#2").hide(); 
    $("#1").show(); 
        }); 

});

HTML

<div id="testimonials"> 
    <div id="1" class="active-slide"> 
     <p>This is paragraph one</p> 
    </div> 
    <div id="2" class="inactive-slide"> 
     <p>This is paragraph two</p> 
    </div> 
    <div id="3" class="inactive-slide"> 
     <p>This is paragraph three</p> 
    </div> 
</div>

我打開任何建議或如果有人知道一個很好的教程來讀做到這一點。

如果我使用UL並嘗試通過尋找孩子來獲得「下一個」會更好嗎？目前我腦子已經死了，似乎無法弄清楚如何做到這一點？

在此先感謝

來源

2013-12-17 Ljubisa

你想做什麼樣的滑塊？你能展示一些現場實例嗎？ –

下面是示例：想法是一次顯示1並隱藏所有剩下的內容。http://jsfiddle.net/theStudent/9G8SH/我可以做到這一點，如果它不是動態加載的...我有一個while循環創建帶有來自數據庫的所有證明的DIV標籤。 – Ljubisa

好了，所以首先有id重塑：數字是無效的HTML，但與現代的瀏覽器我想這不是一個問題。其次，你不能硬編碼那樣的東西。這意味着你將不得不爲每張幻燈片編寫代碼，這不僅會讓人感到痛苦，而且看起來不太好。在這裏，我提出了一個簡單的例子爲用於查看

DEMO

基本上你建立next和prev用作系統正常工作，具有包含當前幻燈片觀看的變量和的數量相等您可以輕鬆計算出總幻燈片，以便下一個或上一個顯示哪個幻燈片。我希望這會有所幫助，並且不要害怕在評論中提出更多問題，我很樂意爲您提供幫助。祝你好運！

來源

2013-12-17 11:35:29

TY這正是我想要做的，我知道我不會硬編碼的ID它只是爲了練習我試圖找出功能第一，但在凌晨4:30它的孩子的努力:)。 .. TY太多了，我會努力做到這一點，並希望得到它 – Ljubisa

是的問題，爲什麼有2倍next.click？ 1是功能和其他一個調用功能？你能給我一個速成課程，爲什麼？ – Ljubisa

@ LJ-C哦，是的，我想我應該已經給演示添加了評論。那就是在開始時初始化滑塊。這也是爲什麼'visible_slide'設置爲'-1'而不是'0'，所以當初始化運行時，值'1'將被添加到'visible_slide'，所以'-1 + 1'等於' 0'，這就是要顯示的幻燈片 –

請更改$('#testimonials').ready到$(#testimonials').load（如果你試圖觸發功能，當一個div被加載）。

Why it is better ?

來源

2013-12-17 11:28:33

我已閱讀你的鏈接謝謝！仍然試圖把我的頭圍繞它。我第一次去欣賞幫助我的努力。謝謝Bala – Ljubisa

@ LJ-C很高興能幫到你。 php_nub_qq顯示的工作是一個值得堅持的工作。 –

試試.....

，而無需使用單獨的ID用於每個格

的jQuery

$(document).ready(function(){ 
     function showHide(opt) { 
      var current = $(".active-slide"); 
      var gHelem = (opt == "next") ? current.next(".testimonials_each") : current.prev(".testimonials_each"); 
      if(gHelem.length > 0) { 
      gHelem.removeClass("inactive-slide").addClass("active-slide"); 
      current.removeClass("active-slide").addClass("inactive-slide"); 
      } 
     } 

     $("#next").click(function(){ 
      showHide("next"); 
     }); 

     $("#prev").click(function(){ 
     showHide("prev"); 
     }); 
    });

CSS

.inactive-slide { 
    display:none; 
}

HTML

<div id="testimonials"> 
    <div class="testimonials_each active-slide"> 
     <p>This is paragraph one</p> 
    </div> 
    <div class="testimonials_each inactive-slide"> 
     <p>This is paragraph two</p> 
    </div> 
    <div class="testimonials_each inactive-slide"> 
     <p>This is paragraph three</p> 
    </div> 
    <button id="prev">Previous</button> 
    <button id="next">Next</button> 
</div>

Live Demo

來源

2013-12-17 11:56:58 rynhe

我的第一個jQuery滑塊我需要一些建議請

回答

相關問題