如何使Animate jQuery方法停止在div的结尾？ [英] How to make the Animate jQuery method stop at end of div?

问题描述

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

I am trying to create a customized carousel and it already has the following features:

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


2. 您可以使用按钮向左或向右移动。

但是，问题是，一旦达到div的结束，按钮不会停用。相反，一切都永远在变化。如下图所示：

However, the problem is that the buttons don't deactivate once the end of the div is reached. Instead, everything keeps shifting forever. See picture below:

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

Take a look at the 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);
});

到达结束后如何停用按钮？例如，当在此处时：

How can I deactivate the buttons once the end is reached? For example, when here:

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

The left button should deactivate since there are no more div's to show.

目标：达到结束时的停用按钮。

The Goal: Deactive buttons when end is reached.

推荐答案

像

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

这篇关于如何使Animate jQuery方法停止在div的结尾？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！