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

Question

您能否看一下此演示，让我知道如何将项目作为无限列表加载到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

这不是圆形滑块，而是以相同的方式工作。

            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);
            });

我评论了它可以返回的部分！ 尝试这个。

Answer 2

您可以通过在左幻灯片/右幻灯片上附加第一个项目/在最后一个项目之前添加最后一个项目，然后在动画完成后将其删除来完成此操作。 然后重置位置。

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'});
    });
});

小提琴： http : //jsfiddle.net/Ls0ex5t0/3/