javascript - 显示一组 <li>，然后隐藏它们以显示另一组 <li>

Question

我正在尝试使用 float 列表项创建轮播。

当按下Next时，当前4个可见的li将被隐藏，接下来的4个将根据需要多次显示。不过，可能并不总是会显示另外 4 个，如下面的情况所示，只会再显示 2 个。

当按下 Prev 时，当前 4 个可见的 li 将被隐藏，并显示前 4 个。

它不需要循环，即如果Next被按下足够多次，它就会到达末尾，它不会再次从头开始。

http://jsfiddle.net/tw16/5NB6G/

HTML:

<div id="left">Prev</div>
<ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
</ul>
<div id="right">Next</div>

jQuery/JavaScript:

var listLength = $('ul li').length;
var listCounter = 0;

$("#right").click(function() {
    if (listCounter == listLength - 1) {
        $("ul li").show(400);
        listCounter = 0;
    }
    else {
        $('ul li').eq(listCounter).hide(400);
        listCounter++;
    }
});

不幸的是，我无法使代码适应上述要求。

Answer 1

没有理由重新发明轮子。查看jCarousel .