如何使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的{​​{1}}位置变为负数。最后，如果left到达该位置，则不应滚动它 上述迷你文本墙的可视化：


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