如何缩略图幻灯片只显示缩略图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。我相信他们中的一个会为你工作的很好，或者它会足够接近，你可以修改它是完美的。