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

Question

我正在尝试创建一个简单的内容 slider ，它可以处理动态添加到 slider 的内容。我发现的“轻量级”插件都没有提供此类功能，或者即使有，也无法正常工作。

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

整个想法是检查何时需要添加元素以及何时 shift 就足够了:

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