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

Question

您能看一下This Demo吗？让我知道如何将项目作为无限列表加载到 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);
}); 

Answer 1

您可以通过在 leftslide/rightslide 上附加第一个项目/在 leftslide/rightslide 前面添加最后一个项目，然后在动画完成时将其删除来实现此目的。然后重置位置。

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/