Question

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

当按下 Next 时，隐藏当前的4个可见li，并根据需要显示下4个。虽然，可能并不总是会有另外4个显示，如下面的情况，只会显示2个。

当按下上一个时，隐藏当前的4个可见li，并显示前面的4个。

它不需要循环，即如果按下 Next 足够多次它将到达终点，它不会再从头开始。

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。

Answer 2

我进行了一些实验并想出了以下内容：

var total = $('ul li').length;
var start = 0;
var count = 4;

update = function() {
    for (var i = 0; i < total; i++) {
        el = $("ul li").eq(i);
        if (i >= start && i < start + count)
            el.show(400);
        else
            el.hide(400);
    }
}

$("#right").click(function() {
    start += count;
    if (start >= total)
        start = 0;
    update();
});

$("#left").click(function() {
    start -= count;
    if (start < 0)
        start = Math.floor(total / count) * count;
    update();
});

请参阅http://jsfiddle.net/5NB6G/43/了解即时演示。

编辑：我刚注意到你不需要包装结束/开头。您可以将以下内容与上面定义的update函数结合使用：

$("#right").click(function() {
    start += count;
    if (start >= total)
        start -= count;
    update();
});

$("#left").click(function() {
    start -= count;
    start = start < 0 ? 0 : start;
    update();
});

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

2 个答案: