jquery - 快速单击下一步可使滑块移出屏幕

这是代码：

html

<div class="slider">
    <ul class="slider-list">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
        <li>
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
        <li>
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
    </ul>
</div>
<div class="controls">
    <span class="prev controls-button">prev</span>
    <span class="next controls-button">next</span>
</div>

的CSS

.slider{
    width: 900px;
    margin: 0 auto 40px;
    position: relative;
    height: 400px;
    overflow: hidden;
}

.slider-list{
    position: absolute;
    width: 100000px;
    left: 0;
    top: 0;
}

.slider-list li{
    display: block;
    float: left;
    width: 820px;
    height: 320px;
    color: #fff;
    font: 20px/28px arial;
    padding: 40px;
    text-align: center;
    background: #45a6ea;
}

span{
    display: inline-block;
    background: #e0e0e0;
    color: #343434;
    height: 20px;
    font: 14px/20px arial;
    padding: 10px;
    cursor: pointer;
    min-width: 60px;
}

.controls{
    text-align: center;
}

jQuery的

$('.controls-button').on('click', function() {
    var slider = $('.slider-list'),
        sliderItems = slider.find('li');
    if ($(this).hasClass('next')) {
        moveNext();

    } else {
        movePrev();
    }



    function moveNext() {
        slider.stop().animate({
            left: '-=' + 900
        }, function() {
            var first = slider.children('li').first().clone();
            slider.children('li').first().remove();
            first.appendTo(slider).parent(slider).css({
                left: 0
            });
        });
    }

    function movePrev() {
        var last = slider.children('li').last();
        slider.children('li').last().remove();
        last.prependTo(slider).parent(slider).css({
            left: '-=' + 900
        }).stop().animate({
            left: 0
        });
    }
});

所以问题出在下一个按钮上。当您快速单击它时，滑块将离开左侧。但是，当您停止执行此操作时，滑块将再次再次居中。但是我尝试做类似上一个按钮的操作。只需尝试快速单击上一个按钮，您就会看到。所以

function moveNext() {
    slider.stop().animate({
        left: '-=' + 900
    }, function() {
        slider.children('li').first().appendTo(slider).parent(slider).css({
            left: 0
        });
    });
}

function movePrev() {
    slider.children('li').last().prependTo(slider).parent(slider).css({
        left: '-=' + 900
    }).stop().animate({
        left: 0
    });
}

然后，您可以看到我使用克隆方法。我什至尝试在movePrev函数上替换.stop（），但是。所以我已经为此烦恼了……因为在moveNext（）处可以根据需要停止工作。但是在movePrev方法.stop中，当您停止快速单击时，只是将滑块返回中间。

对不起，这是小提琴
http://jsfiddle.net/ujqgoyvL/

大萤幕：
http://jsfiddle.net/ujqgoyvL/embedded/result/

最佳答案

您可以使用slider.stop(true, true)使动画跳到其结尾。 http://jsfiddle.net/hrq3mmjy/4/