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

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

            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

您可以通过在动画完成时附加第一项/在leftslide / rightlide上添加最后一项，然后将其删除来完成此操作。然后重置位置。

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/

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

2 个答案: