Javascript 使用jQuery动态添加幻灯片内容

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

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

var$left=$（'.left'），
$right=$（'.right'），
$months=$（'sub-ul'）；
$left.单击（函数（）{
对于（i=0；i<3；i++）{
$months.find（'li'）.first（）；
}
pos=$months.position（）；
$months.css（'left'，pos.left+90）；
});
$right.单击（函数（）{
对于（i=0；i<3；i++）{
$months.find（'li'）.last（）；
}
pos=$months.position（）；
$months.css（'left'，pos.left-90）；
});

这是我到目前为止得到的代码，这里有一个例子-。这是一种工作方式，但问题是，由于添加了新内容，导航功能会关闭（你可以通过点击几次左右键来了解我的意思）

我知道这有什么问题-新添加的项“移动”了内容，我需要做比在元素的左侧位置减去/添加90px更好的计算，但我不知道如何获得元素的正确索引，基本上得到精确（正确）的3（或6）的滑动当时的元素。
当前，每当按下导航按钮时，代码都会添加额外的元素，如果我可以获得当前可见的第一个/最后一个元素的索引，我可能会知道是否需要添加更多元素，然后只添加它们

这是我努力实现目标的基本例证

编辑

---

我已将JSFIDLE更改为正确的JSFIDLE。

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

$（文档）.ready（函数（）
{
变量$main=$（'.main'），
$left=$（'.left'），
$right=$（'.right'），
$months=$（'sub-ul'）；
var-addCount=3；
var-liWidth=30；
var shiftX=addCount*liWidth；
$left.单击（函数（）
{
var currentLeft=parseInt（$months.css（'left'））；
var totalLength=$months.find（'li'）。长度*宽度；
如果（-currentLeft+$main.width（）>=totalLength）
{   
对于（变量i=0；ixxx'之后）；
}
}
$months.css（'left'，currentLeft-=shiftX）；
});
$right.单击（函数（）
{
var currentLeft=parseInt（$months.css（'left'））；
如果（currentLeft<0）
{
$months.css（'left'，currentLeft+=shiftX）；
}
其他的
{
对于（变量i=0；ixxx'）之前；
}
}
});
});

您能否更详细地说明您想要实现的目标？我理解你的摆弄，也看到导航由于你的代码而越界-但我仍然不明白你想要你的滑块是什么样的…我希望滑块能够在几个月之间来回滚动，并动态添加新的、卸载的月份。它也会在几年之间跳跃。目前还没有显示年份和月份的迹象，因为这将在以后添加。好的。。。明白了。。。既然已经有了解决办法，我现在就得走了。。。我会让它保持原样。。。但如果你想让我这么做，我会提供另一种解决方案，不需要重新定位幻灯片，也只需要加载新的幻灯片，如果需要的话。。。明天…完全按照我的计划进行。谢谢你的帮助。@EliahJohn不客气。但是，

$left

（添加了不必要的

）有一个bug，所以请在几分钟后检查更新情况。@EliahJohn终于按预期工作了。

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