Javascript 如何停止无限的幻灯片在一个非常基本的滑块与李元素？

我正在使用这个基本的滑块作为我的注册表

这是我控制幻灯片的方式： （我使用变量跟踪用户的位置，这是面板。）

我发现的错误是，如果你快速点击，你可以绕过这个“控制”的东西，滑块变为无穷大，你可以在任何li元素上漫游，如果你试图制作一个包含分离部分的注册表，这是不好的

我认为问题出在这里：

（左移动画之后）

（右移动画之后）

（和在滑块的开头）

---

我说实话，除了这一部分，我了解整个滑块。我怎样才能解决这个问题？我希望有同样的行为，只是没有这个小虫子

可以在动画工作时隐藏下一个/上一个按钮，并在完成时显示

function move(lOr){   //this function replaces moveLeft and moveRight
    $("a[class^=control_]").hide(0);

    var direction = (lOr === 'left') ? '+'+slideWidth : '-'+slideWidth;
    $('#slider ul').animate({
        left: direction
    }, 500, function () {
        switch(lOr)
        {
          case 'left':
              $('#slider ul li:last-child').prependTo('#slider ul');
          break;
          default:
              $('#slider ul li:first-child').appendTo('#slider ul');
          break;
        }            
        $('#slider ul').css('left', '');
        $("a[class^=control_]").show(0);
    });
}

$('a.control_prev').click(function () {
    move('left');
});

$('a.control_next').click(function () {
    move('right');
});

}))

看这个

编辑：

您可以禁用/启用按钮，而不是隐藏按钮：

function move(lOr){   //this function replaces moveLeft and moveRight
    $("a[class^=control_]").unbind("click");
....

....
    $('#slider ul').css('left', '');
    $('a.control_prev').click(function () {
          move('left');
    });
    $('a.control_next').click(function () {
          move('right');
    });
....

---

在@ojovirtual的帖子发布后，我又尝试了几件事，成功地解决了我的问题

我使用一个名为

mehet

（默认值：true）的辅助变量，在动画前后更改它的布尔值，然后在单击时的条件中使用它

function moveRight() {

        mehet = false;

        $('#slider ul').animate({
            left: - slideWidth
            }, 300, function () {

                mehet = true;

以及修改后的条件：

// previous btn
    $('.navTitle a').click(function () {  
            if ((panel !== 1) && (mehet === true)){    
                    moveLeft();   
            }            
    });

// next btn
$('#reg-userNextBtn').click(function () {

        if ((panel !== max) && (mehet === true)) {
                moveRight();
        }  
});

---

“我说实话，除了这一部分，我了解整个滑块”。。。证明它。StackOverflow是关于透明度和诚实的程序员。问题是，如果你多次点击它，它会一直滑动吗？是的，但不是。如果您缓慢地单击，则工作正常；实际上，如果您快速单击滑块的任何部分（最后一个和第一个元素除外），则工作正常。那么它就不会听条件的变化。如果快速单击“上一步”按钮并停止单击第一个元素，然后在第二秒后再次单击“上一步”按钮，则条件有效。。如果你不停下来，它就会无限滑动，我的意思是你可以绕过整个li元素。看来你点击的速度太快了，无法执行条件。现在我尝试了另一件事，当你在表单的幻灯片上时，js使“下一步”按钮处于非活动状态。。。正常情况下，但如果你点击得很快，你也可以避免这种情况发生我的情况有这么糟糕吗？我已经完成了整个注册过程，所以我现在可能不会更换所有的东西，但我会尝试这个显示/隐藏技巧，并在几分钟后给你反馈。：）谢谢它很好用，但在我的设计上看起来很难看。我将尝试使用setTimeout 1s以某种方式进行移动事件。谢谢你的回答，这就是我需要的，一点推动，一点指导@您还可以禁用/启用按钮，而不是隐藏/显示按钮。看一下编辑。（Codepen也经过编辑）。我会给你一个被接受的答案，因为我感谢你的帮助，但我也会发布我的版本。我在你发帖后解决了它。：）

function move(lOr){   //this function replaces moveLeft and moveRight
    $("a[class^=control_]").hide(0);

    var direction = (lOr === 'left') ? '+'+slideWidth : '-'+slideWidth;
    $('#slider ul').animate({
        left: direction
    }, 500, function () {
        switch(lOr)
        {
          case 'left':
              $('#slider ul li:last-child').prependTo('#slider ul');
          break;
          default:
              $('#slider ul li:first-child').appendTo('#slider ul');
          break;
        }            
        $('#slider ul').css('left', '');
        $("a[class^=control_]").show(0);
    });
}

$('a.control_prev').click(function () {
    move('left');
});

$('a.control_next').click(function () {
    move('right');
});

function move(lOr){   //this function replaces moveLeft and moveRight
    $("a[class^=control_]").unbind("click");
....

....
    $('#slider ul').css('left', '');
    $('a.control_prev').click(function () {
          move('left');
    });
    $('a.control_next').click(function () {
          move('right');
    });
....

function moveRight() {

        mehet = false;

        $('#slider ul').animate({
            left: - slideWidth
            }, 300, function () {

                mehet = true;

function moveLeft() {

    mehet = false;

    $('#slider ul').animate({
        left: + slideWidth
        }, 300, function () {

            mehet = true;

// previous btn
    $('.navTitle a').click(function () {  
            if ((panel !== 1) && (mehet === true)){    
                    moveLeft();   
            }            
    });

// next btn
$('#reg-userNextBtn').click(function () {

        if ((panel !== max) && (mehet === true)) {
                moveRight();
        }  
});