Question

我在选择客户区幻灯片时遇到问题，请查看以下链接

现在这里有10个imgs，但它只是滑动并显示6个图像，

我希望缩略图滚轮宽度滚动，直到完成图像。

<div class="inner_right_main_tow thumbnailscroller">Content here</div>

这里是jquery代码，

$(".carousel-next").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '-710px'});
});

$(".carousel-previous").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '0'});
});

Answer 1

这是因为你给它一个固定的位置来滚动到-710px

您需要使用-=710px使其动态化。这意味着每次单击它都会向左移动710个像素。

$(".carousel-next").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '-=710px'});
});

但现在你需要处理何时停止......

更新以处理停止（变得更复杂）

我会更改CSS以使其更容易..

CSS修正

从9999px规则中删除.carousel。

对于.thumbnailscroller .carousel ul添加

white-space:nowrap;
display:inline-block;

并且.inner_right_main_tow li删除float:left并添加
```
display:inline-block;
```

<强>的jQuery

$(window).load(function(){
    var ul = $('.thumbnailscroller').find('ul'),
        step = ul.closest('.thumbnailscroller').width(),
        maxLoc = step - ul.width();

    $(".carousel-next").click(function(){
        var animated = ul.is(':animated'),
            currentLoc = parseInt(ul.css('left'),10),
            nextPos = Math.max(maxLoc, currentLoc -step); 

        if (!animated){
            ul.animate({left: nextPos});
        }
    });
    $(".carousel-previous").click(function(){
        var animated = ul.is(':animated'),
            currentLoc = parseInt(ul.css('left'),10),
            nextPos = Math.min(0, currentLoc +step); 

        if (!animated){
            ul.animate({left: nextPos});
        }
    });
});

我如何获得div的宽度然后用jquery动画

1 个答案: