显示一组<李>s，然后隐藏它们以显示另一个集合数<李>s

Show a set number of <li>s and then hide them to reveal another set number of <li>s

本文关键字：lt 显示 gt 另一个 集合 隐藏 然后 一组      更新时间：2023-09-26

我正在尝试使用浮动列表项创建一个转盘。

按下Next时，当前4个可见的li s将被隐藏，下一个4将根据需要显示多次。不过，可能并不总是有另外4个要显示，因为在下面的情况下，只有2个要显示。

按下Prev时，当前4个可见的li s将被隐藏，前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++;
    }
});

不幸的是，我还没能使代码适应上面的要求。

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

我做了一些实验，得出了以下结果：

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();
});
相关文章：