使用 jQuery 滑动动态添加内容

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