javascript - 如何在具有li元素的非常基本的滑块中停止无穷大幻灯片？

我正在使用此基本滑块进行注册。 (Right here the original slider's Codepen)

这是我控制幻灯片的方式：
（我使用一个变量来跟踪用户在哪里，这是面板。）

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

// next
$('#reg-userNextBtn').click(function () {
    if (panel !== max) {
        moveRight();
    }
});

我发现的错误是，如果单击得非常快，则可以绕开该“控件”，并且滑块变为无穷大，您可以遍历任何li元素，如果您要制作包含分开的部分。

我认为问题出在这里：

（在向左移动动画之后）

$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');

（右移动画后）

$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');

（以及滑块的开头）

$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');

我说实话，我理解除了这部分以外的整个滑块。我该如何解决这个问题？我希望有相同的行为，只是没有这个小错误。

最佳答案

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

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

}）;

参见此Codepen。

编辑：

除了隐藏按钮，您可以禁用/启用它们：

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');
    });
....