javascript - 如何使 Animate jQuery 方法在 div 末尾停止？

Question

我正在尝试创建一个定制的轮播，它已经具有以下功能：

1. 您可以使用鼠标左右移动，也可以在手机/平板电脑上滑动。
2. 您可以使用按钮向左或向右移动。

但是，问题在于，一旦到达 div 的末尾，按钮就不会停用。相反，一切都在不断变化。见下图：

看看jsFiddle：http: //jsfiddle.net/vnkRw/2/

$("#left").click(function() {
    $(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
    $(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);
});

到达终点后如何停用按钮？例如，当在这里：

左按钮应该停用，因为没有更多的 div 可以显示。

当然，右边也一样：

目标：到达终点时停用按钮。

Answer 1

就像是

   pos=slides=$(".wrapper > div").length;

   $("#left").click(function() {
    if(pos>3){$(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);pos--;}
   });

   $("#right").click(function() {
    if(pos<slides){$(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);pos++;}
   });

   $('.carousel').kinetic();

Answer 2

做轮播时有一些事情需要考虑，我会带你开始。

1. 所有项目的宽度是否相同
2. 所有项目是否具有相同的边距
3. 上面的东西会变吗

我们假设上面所有的东西都是静态的，如果左边的位置是 ，这个想法是不会发生向右滚动wrapper的0。这是最容易的部分。对于另一个方向，您必须获取所有项目的数量，减去可见项目的数量（在您的情况下为 3），将其乘以它们的宽度（包括边距），所有这些都提供所有项目的宽度和边距相同..最后你必须乘以-1，因为你wrapper的left位置变成负数。最后，如果wrapper到达那个位置，你不应该滚动它。
上述迷你文本墙的可视化：

http://jsfiddle.net/vnkRw/4/