javascript - 在 jQuery 列表中添加滚动动画

Question

我有一个列表，如果您单击 prev next，它会向左和向右移动，如 this fiddle 所示。

HTML

    <div>
    <span id="prev">prev</span>
        <ul id="scrolllist">
            <li><img src="http://dummyimage.com/100x100/000000/fff"></li>
            <li><img src="http://dummyimage.com/100x100/f33636/fff"></li>
            <li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li>
            <li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li>
        </ul>
    <span id="next">next</span>
    </div>

CSS

    div {
        float: left;
        width: 550px;
    }
    li {
        float: left;
        list-style-type: none;
        margin: 0 5px;
    }
    #prev {
        cursor: pointer;
        float: left;
    }
    #next {
        cursor: pointer;
        float: right;
    }

JS

    $(function () {
        $('#prev').click(function () {
            var first = $('#scrolllist li:first-child');
            $('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow" );
        });
        $('#next').click(function () {
            var last = $('#scrolllist li:last');
            $('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow" );
        });
    });

这项工作按预期移动了它们，但是我想滚动列表项以使它们在单击的方向上产生影响，类似于在 http://coolcarousels.frebsite.nl/c/58/ 中可以看到的那样

我需要做什么才能让它正常工作？

Answer 1

正确执行此操作的技巧是将图像放在隐藏的容器 div 中，然后根据需要将该容器向左或向右设置动画，克隆列表中的第一个或最后一个 img，然后根据方向附加或前置.

img 容器 div 必须放置在另一个具有明确高度和宽度且溢出设置为隐藏的 div 中。这可以防止宽 img 容器对用户可见。

这是 HTML:

<div>
<span id="prev">prev</span>
<div class="scroll-container">
    <div class="img-container">
        <img src="http://dummyimage.com/100x100/000000/fff">
        <img src="http://dummyimage.com/100x100/f33636/fff">
        <img src="http://dummyimage.com/100x100/0c5b9e/fff">
        <img src="http://dummyimage.com/100x100/0c9e0c/fff">
    </div>
</div>
<span id="next">next</span>

和 JavaScript:

$(function () {
$('#prev').click(function () {
    if(!$('.img-container').is(':animated')) {
        var first = $('.img-container img:first-child');
        var firstClone = first.clone();
        $('.img-container').append(firstClone);
        $('.img-container').animate({ "left": "-=110px" }, "slow", function() {
            first.remove();
            $('.img-container').css("left", "0");
        });
    }
});
$('#next').click(function () {
    if(!$('.img-container').is(':animated')) {
        var last = $('.img-container img:last-child');
        var lastClone = last.clone();
        $('.img-container').css("left", "-110px");
        $('.img-container').prepend(lastClone);
        $('.img-container').animate({ "left": "0" }, "slow", function() {
            last.remove();
        });
    }
});
});

请注意每个函数开头的“if not animated”检查。这可以防止用户在动画完成之前再次运行函数(这会导致奇怪的错误)。

这是您的 fiddle 的修改版本:http://jsfiddle.net/fJqKV/17/