Question

我从列表ul中构建了一个滑块，其中包含15个li。

我将每个5元素显示为一个组。在和中，如果单击下一个或上一个按钮，它将缓慢移动到接下来的五个元素，但在第三次单击后（当您第四次单击上一个时），它不会显示任何元素。我知道这是正常的，因为我使用right: "+=855"移动元素，所以在三次移动后，15个元素将结束。

我希望这个循环继续（在第四次点击我想要显示元素1-5中的元素）。

此链接将显示我的意思： http://jsfiddle.net/mpx83tpv/1/

我可以添加animate函数来实现此目的吗？

Answer 1

没有添加动画可以做这样的事情，但你总是可以使用.prepend()或.append()：

$("ul.slider").animate({
    right: "+=855"
}, 1000, function(){
    $("ul.slider").css('right', '0');
    $('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
});

Fiddle

Answer 2

滚动后，只需将<li>拖放到最后：

$(".prev_button").click(function () {
    $("ul.slider").animate({
        right: "+=855"
    }, 5000, function () {
        $("ul.slider").append($("ul.slider li:lt(5)"))
            .css("right", "-=855");
    });
});

http://jsfiddle.net/mpx83tpv/9/

如何让我的滑块继续循环？

2 个答案: