javascript - 如何使用jquery将项目的动态列表水平滑入和滑出div

Question

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

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

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

我正在尝试做的事情：

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

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

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

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

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

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

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

有人对当前更好的实施有想法吗？

谢谢。

score 3 · Accepted Answer

You could simply reset the margin-left property of your list after you have removed the list-item from the head:

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

Updated fiddle.

1 回答 1