Question

我在注册表单中使用此基本滑块。 (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');

我说实话我理解除了这一部分之外的整个滑块。我怎么能解决这个问题？我想有相同的行为，只是没有这个小错误。

Answer 1

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

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

Answer 2

在@ ojovirtual的帖子之后，我再次尝试了几件事，我成功地解决了我的问题。

我使用一个名为mehet的辅助变量（默认值：true），我在动画之前和之后更改它的布尔值，然后在点击条件下使用它。

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

如何在带有li元素的非常基本的滑块中停止无限幻灯片？

2 个答案: