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

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 .