1

我需要用缩略图滑块制作一些简单的 JavaScript 图库。

我制作了滑块，当我单击向左或向右箭头时，margin-right 更改并添加或删除 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);
    });
4

1 回答 1

3

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

于 2013-02-27T07:45:46.943 回答