如何将项目加载到无限循环中

How to Load Items into an Infinite Loop

本文关键字：无限循环加载项目更新时间：2023-09-26

你能看看这个演示吗？让我知道如何将项目作为无尽的列表加载到ul列表中。正如你所看到的，我有这个列表作为下面的代码，但我需要在每个时间列表的末尾一次又一次地添加项目。

var item = $(".thumbnail").width();
var paddT = $(".thumbnail").css('margin-left');
item = item + 20;
$(".leftslide").on("click", function () {
    $(".list-inline").animate({
        left: '-=' + item + 'px'
    }, 300);
});
$(".rightslide").on("click", function () {
    $(".list-inline").animate({
        left: '+=' + item + 'px'
    }, 300);
});

您可以通过在左幻灯片/右幻灯片上附加第一个项目/准备最后一个项目，然后在动画完成后将其删除来实现这一点。然后重置位置。

var item = $(".thumbnail").width();
var paddT = $(".thumbnail").css('margin-left');
item = item + 20;
$(".leftslide").on("click", function () {
    $(".list-inline").animate({
        left: '-=' + item + 'px'
    }, 300, function() {
        $(".list-inline").append('<li>' + $('li').first().html() + '</li>');
        $('li').first().remove();
        $(".list-inline").css({left: '+=' + item + 'px'});
    });
});
$(".rightslide").on("click", function () {
    $(".list-inline").animate({
        left: '+=' + item + 'px'
    }, 300, function() {
        $(".list-inline").prepend('<li>' + $('li').last().html() + '</li>');
        $('li').last().remove();
        $(".list-inline").css({left: '-=' + item + 'px'});
    });
});

Fiddle：http://jsfiddle.net/Ls0ex5t0/3/

这不是一个圆形滑块，但工作方式相同。

            var item = $(".thumbnail").width();
            var paddT = $(".thumbnail").css('margin-left');
            var current= 0;
            var total= $(".list-inline li").length;
            item = item + 20;
            $(".leftslide").on("click", function () {
                    current++;
                    if(current>=total){
            //                      $(".list-inline").animate({
            //                              left: '0px'
            //                      }, 300);
            //              current=0;
                            return;
                    }
                    $(".list-inline").animate({
                            left: '-=' + item + 'px'
                    }, 300);
            });
            $(".rightslide").on("click", function () {
                    current--;
                    if(current<=0){
            //                      $(".list-inline").animate({
            //                              left: '0px'
            //                      }, 300);
            //              current=0;
                            return;
                    }
                    $(".list-inline").animate({
                            left: '+=' + item + 'px'
                    }, 300);
            });

我已经评论了它返回的部分！试试这个。