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

标签 javascript jquery css

我正在尝试创建自定义轮播,它已经具有以下功能:

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

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

enter image description here

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

到达终点后如何停用按钮?例如,当这里:

enter image description here

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

当然,右边也一样:

enter image description here

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

最佳答案

有点像

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

关于javascript - 如何使 Animate jQuery 方法在 div 的末尾停止?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16111142/

相关文章:

javascript - 使用每个 jquery 循环遍历数组

html - JQueryUI Accordion 不适用于多级菜单(元素重叠)

javascript - 如何在 GSAP 时间线动画完成后删除类?

javascript - 如何获取点击区域的id而不是父id?

javascript - jQuery单选按钮隐藏输入值更改

javascript - 制作一个链接滑动并打开一个新的div到它的右边

javascript - 我将如何利用 ng-repeat 而不是 Javascript 循环在我的下拉列表中创建年份列表?

javascript - 打开 iframe 并折叠整个页面

javascript - 从插件向用户显示警告(不是错误)消息

javascript - jQuery .ajax() JSONP 响应的间歇性类型错误