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

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

所以问题出在下一个按钮上。当你非常快地点击它时，滑块会从左边开出。但是当你停止这样做时，滑块会再次插入中心。但是我试着像prev按钮那样做。只需尝试快速点击上一步按钮即可看到。所以

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/

Answer 1

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

快速单击下一步使滑块离开屏幕

1 个答案: