javascript - 使用javascript显示无序列表中的多个内容项

Question

我想让下面的代码按时间顺序一次显示 6 个列表项中的 3 个，而不是只显示一个。这是示例项目内容:

<ul id="newgall">
    <li>
        <div class="newsblock">ITEM CONTENT 1</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 2</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 3</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 4</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 5</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 6</div>
    </li>
</ul>

我使用以下脚本:

$('#newgall li:first').addClass('curr');
$('#newgall li:not(:first)').hide();

var slide = function () {
    var Act_curr = $('#newgall li.curr');
    Act_curr.hide().removeClass('curr');

    if (Act_curr.next()[0] && Act_curr.next()[0].nodeName == 'LI') {
        Act_curr.next().show('fade').addClass('curr');
    } else {
        $('#newgall li:first').addClass('curr').show('fade');
    }
    setTimeout(slide, 4500);
};

slide();

最终的希望是将其用作 WordPress 的最新帖子代码。感谢您的帮助!

Answer 1

您可以使用 modulo运算符计算要在每个步骤上显示的 LI 的索引。例如:

var $items = $('#newgall li'),
    i = 0;

function slide() {
    var index = i % $items.length;
    $items.hide().removeClass('curr').slice(index, index +3).show('fade').addClass('curr');
    i += 3;
    setTimeout(slide, 4000);
};

slide();

演示:http://plnkr.co/edit/JjVbpApDDAASpSkEnxJh?p=preview