jQuery的幻燈片的縮略圖

我需要做幻燈片，與後續代碼：jQuery的幻燈片的縮略圖

<div id="galerry-one" class="gallery"> 
    <div class="content"> 
     <ul> 
      <li id="content-1"><img src="image1.jpg" /></li> 
      <li id="content-2"><img src="image2.jpg" /></li> 
      <li id="content-3"><iframe src="http://www.youtube.com/..."></iframe></li> 
      <li id="content-4"><img src="image3.jpg" /></li> 
      <li id="content-5"><iframe src="http://www.youtube.com/..."></iframe></li> 
     </ul> 
    </div> 
    <div class="thumbnails"> 
     <span class="prev"> « </span> 
     <ul> 
      <li id="go-content-1"><img src="image1_thumbnai.jpg" /></li> 
      <li id="go-content-2"><img src="image2_thumbnai.jpg" /></li> 
      <li id="go-content-3"><img src="youtube1_thumbnai.jpg" /></li> 
      <li id="go-content-4"><img src="image3_thumbnai.jpg" /></li> 
      <li id="go-content-5"><img src="youtube2_thumbnai.jpg" /></li> 
     </ul> 
     <span class="next"> » </span> 
    </div> 
</div>

好吧，當我點擊a與go-content-1 ID，所有其他幻燈片隱藏和顯示1等。

我已經開始：

$(document).ready(function() { 
    $('.gallery').each(function(index, element) { 
     var id = $(this).attr('id'); 
     var images = $('#' + id + ' .content li').index() -1; 

     $('#' + id + ' .prev').click(function(e) { 
      e.preventDefault(); 

      if($('#' + id + ' .content .current').prev().length == 0) { 
       $('#' + id + ' .content .current').removeClass('current').hide(); 
       $('#' + id + ' .content li:last').addClass('current').show(); 
      } else { 
       $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().prev().fadeIn(1000).addClass('current').show(); 
      } 

      return false; 
     }); 

     $('#' + id + ' .next').click(function(e) { 
      e.preventDefault(); 

      if($('#' + id + ' .content .current').next().length == 0) { 
       $('#' + id + ' .content .current').removeClass('current').hide(); 
       $('#' + id + ' .content li:first').addClass('current').show(); 
      } else { 
       $('#' + id + ' .content .current').removeClass('current').fadeOut(1000).hide().next().fadeIn(1000).addClass('current').show(); 
      } 

      return false; 
     }); 

     $('#' + id + ' .thumbnails li').click(function(e) { 
      e.preventDefault(); 

      $('#' + id + ' .content .current').removeClass('current').hide(); 
      $('#' + id + ' .content .thumbnails').removeClass('current'); 
      $('#' + id + ' .content li').eq($(this).index()).fadeIn(1000).addClass('current').show(); 

      return false; 
     }); 

     $('#' + id + ' .content li:first').addClass('current').show(); 
    }); 
});

現在的問題是每次都顯示只有4縮略圖。謝謝！

來源

2012-02-12 Gabriel Santos

重要的是知道索引，在任何時候。看看我剛纔寫的關於如何創建滑塊的教程，它可能有助於http://www.onextrapixel.com/2011/07/01/how-to-create-a-slideshow-plugin-with -jquery/ – elclanrs 2012-02-12 20:12:36

不要在ID中硬編碼數字。使用next和prev。

另外我建議閱讀關於delegate，它會提高客戶端的性能，並使代碼更清潔。提示：使用委託而不是你寫的內容的第二行。

快樂學習！ :)

來源

2012-02-12 20:55:56

已實施，但我無法執行縮略圖顯示/隱藏，每次只顯示4個。 – 2012-02-13 00:14:44

看到我更新的問題，我到目前爲止做了什麼。 – 2012-02-13 00:17:22

jQuery的幻燈片的縮略圖

回答

相關問題