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

<强> JQuery的

var count=$(".thumbnail").length;
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(){
        var lastTmb=$(".thumbnail:last");        
        if(lastTmb.offset().left<0)
        {
            //for (i = 0; i <= count; i++) {
                 //$(".thumbnail:first").parent().insertAfter(lastTmb.parent());
            //}
            $(".list-inline").animate({
               left: '+=' + item*count + 'px'
            }, 300);
        }
    });
});
$(".rightslide").on("click", function () {
    $(".list-inline").animate({
        left: '+=' + item + 'px'
    }, 300,function(){
        var firstTmb=$(".thumbnail:first");        
        if(firstTmb.offset().left>0)
        {
            //for (i = 0; i <= count; i++) {
                 //$(".thumbnail:last").parent().insertAfter(firstTmb.parent());
            //}
            $(".list-inline").animate({
               left: '-=' + item*count + 'px'
            }, 300);
        }
    });
});

DEMO

Answer 2

克隆了第一个/最后一个li，并在.list-inline动画后必要时预先添加/附加到.list-inline：

Fiddle

var item = $(".thumbnail").width();
var paddT = $(".thumbnail").css('margin-left');
item = item + 20;

var list = $(".list-inline");

$(".leftslide").on("click", function()
{
    list.animate
    (
        {
            left: '-=' + item + 'px'
        },
        300, 
        function()
        {
            if (parseInt(list.css("left")) >= -$(".list-inline li").length * item)
            {
                list.find("li:last").clone().appendTo(list);
            }
        }
    );
});

$(".rightslide").on("click", function()
{
    $(".list-inline").animate
    (
        {
            left: '+=' + item + 'px'
        },
        300,
        function()
        {
            if (parseInt(list.css("left")) >= item)
            {
                list.find("li:first").clone().prependTo(list);
                list.css("left", '-=' + item + 'px');
            }
        }
    );
});

如何在开始和结束时将现有项目克隆到圆形滑块

2 个答案: