如何使缩略图幻灯片只显示缩略图图片

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

你在正确的轨道上，但是没有必要在这里重新发明轮子。像这样的Carousels是最常用的开发小部件之一，因此您一定会找到比您可以快速构建的任何东西更好、更稳定、具有更多功能的东西。以下是55个carousel javascript插件列表:http://www.tripwiremagazine.com/2012/12/jquery-carousel.html。我相信其中一个会很适合你，或者它会足够接近，你可以修改它是完美的。