jquery - 快速点击下一步使 slider 离开屏幕

Question

代码如下:

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

j查询

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

所以问题出在下一个按钮上。当您快速单击它时， slider 会从左侧移出。但是当你停止这样做时， slider 再次附加到中心。但我试图做一些类似上一个按钮的事情。只需尝试快速单击上一个按钮，您就会看到。所以

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 只是将 slider 返回到中心。

对不起，这里是 fiddle http://jsfiddle.net/ujqgoyvL/

大屏幕: http://jsfiddle.net/ujqgoyvL/embedded/result/

Answer 1

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