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

i have a problem with select client area slides please review below link

我有选择客户区幻灯片的问题,请查看以下链接

right now here is 10 imgs but it just slide and show 6 images,

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

i want thumbnailscroller width to scroll untill images finished.

我想要缩略图滚动宽度滚动直到完成的图像。

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

and here is jquery code,

这是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'});
});

1 个解决方案

#1

This happens because you give it a fixed location to scroll to -710px

发生这种情况是因为您给它一个固定的位置来滚动到-710px

You need to make this dynamic with -=710px. This means that each time you click it will move 710 pixels to the left.

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

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

But now you need to handle the when to stop..

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

Update to handle stopping (gets more complicated)

更新处理停止(变得更复杂)

I would change the CSS to make it easier..

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

CSS fixes

Remove the 9999px from the .carousel rule.

从.carousel规则中删除9999px。

For the .thumbnailscroller .carousel ul add

对于.thumbnailscroller .carousel ul add
```
white-space:nowrap;
display:inline-block;
```
and for the .inner_right_main_tow li remove the float:left and add

并为.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});
        }
    });
});

#1