如何使我的滑块继续循环

how to make my slider continue its loop?

本文关键字：继续 循环 何使 我的      更新时间：2023-09-26

我有一个从列表ul中构建的滑块，该列表包含15个li。

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

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

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

我可以添加animate功能来实现这一点吗？

没有任何附加的动画可以做这样的事情，但你总是可以使用.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

只需在滚动后将<li> s拖到末尾：

$(".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/

相关文章：