jquery - 我如何获得 div 的宽度，然后用 jquery 制作动画

Question

我对选择客户区幻灯片有疑问，请查看以下链接

演示

现在这里有 10 张图片，但它只是滑动并显示 6 张图片，

我希望 thumbnailscroller 宽度滚动直到图像完成。

<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});
        }
    });
});