如何縮略圖幻燈片只顯示縮略圖pic

Question

我需要製作一些簡單的JavaScript圖庫與縮略圖滑塊。

我做了滑塊，當我點擊左邊或右邊的箭頭邊距右改變並添加或刪除570px。但是我想讓它變得更好，當畫廊加載時，請取消滾動右側選項，因爲實際上有圖片，最後圖片也是如此。

HTML結構是這樣的：

<div class="tumbNavigation"> 
    <div class="right_nav"></div> 
    <div class="thumbnails"> 
     <div class="thumbnailsWrapper"> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
      <div class="thumbItem"></div> 
     </div> 
    </div> 
    <div class="left_nav"></div> 
</div> 

JavaScript代碼如下所示：

 var pos = 0; 
     var width = 570; 
    $('.left_nav').click(function(){ 
     pos = pos - width; 
     $('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500); 
    }); 

    $('.right_nav').click(function(){ 

     pos = pos + width; 
     $('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500); 
    }); 

Answer 1

你在正確的軌道上，但沒有必要在這裏重新發明輪子。像這樣的傳送帶是最常開發的小部件之一，非常適合您找到比您可以快速構建的任何更好，更穩定和更多功能的東西。以下是55個傳送帶javascript插件的列表：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html。我相信他們中的一個會爲你工作的很好，或者它會足夠接近，你可以修改它是完美的。