如何使用jquery在div中水平放入和移出动态项目列表

Question

我正在使用div容器作为窗口，使用jquery将水平li项列表滑入和移出视图。

这是我到目前为止所做的： http://jsfiddle.net/TX5fJ/5/

它初始化了8个项目的列表，并允许您在div窗口中左右滚动它们。它还具有将项目添加到列表末尾并从列表开头删除项目的功能。

我想做什么：

1）将项目添加到列表末尾（项目不可见）

2）向左滚动列表以使刚添加的项目可见（第一项移出视图）

3）从列表的头部删除项目（不再需要）

问题是删除第一项会导致整个列表向左移动。

如果我不删除第一个项目，它似乎工作。 （见我的测试功能）

我对这个解决方案的担忧是ul必须足够宽以容纳所有潜在的物品。如果我没有给它一个固定的宽度，它就不起作用。

所以我想我可以使它宽99999px，并在测试按钮中使用当前方法。

任何人都有关于比当前更好的实施的想法吗？

感谢。

Answer 1

从头部删除列表项后，您可以简单地重置列表的margin-left属性：

function RemoveItem() {
    $('#slider-items li').first().remove();
    $('#slider-items').css('marginLeft', 0);
}  

更新了fiddle。