Question

我正在尝试创建一个简单的内容滑块，可以处理动态添加到滑块的内容。我找到的所有“轻量级”插件都没有提供这样的功能，或者如果它没有，它就无法正常工作。

var $left = $('.left'),
    $right = $('.right'),
    $months = $('.sub ul');


$left.click(function(){
    for(i = 0; i < 3; i++){
        $months.find('li').first().before($.parseHTML('<li>xxx</li>'));   
    }
    pos = $months.position();
    $months.css('left', pos.left + 90);
});

$right.click(function(){
    for(i = 0; i < 3; i++){
        $months.find('li').last().after($.parseHTML('<li>xxx</li>'));   
    }
    pos = $months.position();
    $months.css('left', pos.left - 90);
});

这是我到目前为止所获得的代码，这里有一个例子 - http://jsfiddle.net/kkr4zg0r/2/。它有点工作，但问题是，由于添加了新内容，导航会消失（你可以通过点击左右几次看到我的意思）。

我明白这有什么问题 - 新添加的项目“移动”内容，我需要做更好的计算，而不是减少/添加90px到元素的左侧位置，但我无法弄清楚如何获得正确的元素索引，并且基本上通过当前3（或6）个元素精确地（并且正确地）滑动目前，只要按下导航按钮，代码就会添加额外的元素，如果我能获得当前可见的第一个/最后一个元素的索引，我可能会告诉我是否需要添加更多元素，然后才添加它们。

这是我想要实现的基本例证

修改
我把jsfiddle改成了正确的。

Answer 1

整个想法是检查何时需要添加元素以及何时移位是足够的：

Fiddle

$(document).ready(function()
{
    var $main = $('.main'),
        $left = $('.left'),
        $right = $('.right'),
        $months = $('.sub ul');

    var addCount = 3;
    var liWidth = 30;
    var shiftX = addCount * liWidth;

    $left.click(function()
    {
        var currentLeft = parseInt($months.css('left'));
        var totalLength = $months.find('li').length * liWidth;
        if (-currentLeft + $main.width() >= totalLength)
        {   
            for (var i = 0; i < addCount; i++)
            {
                $months.find('li:last').after('<li>xxx</li>');   
            }
        }
        $months.css('left', currentLeft -= shiftX);
    });

    $right.click(function()
    {
        var currentLeft = parseInt($months.css('left'));
        if (currentLeft < 0)
        {
            $months.css('left', currentLeft += shiftX);
        }
        else
        {
            for (var i = 0; i < addCount; i++)
            {
                $months.find('li:first').before('<li>xxx</li>');   
            }
        }
    });
});

使用jQuery滑动动态添加的内容

1 个答案: