使用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

您可以使用模运算符来计算将在每个步骤中显示的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

Answer 2

如果您要查找的列表一次要增加一项，而不是三项，则可以使用：

for(var i = 1; i <= 3; i++){
    $('#newgall li:nth-child(' + i + ')').addClass('curr');    
}
$('#newgall li:not(.curr)').hide();

var slide = function () {
    var Act_curr = $('#newgall li.curr:eq(0)');
    var newItem = $('#newgall li.curr:eq(2)');

    Act_curr.hide().removeClass('curr');

    if (newItem.next()[0] && newItem.next()[0].nodeName == 'LI') {
        newItem.next().show('fade').addClass('curr');
    } else {
        $('#newgall .curr').removeClass('curr').hide();
        $('#newgall li:first').addClass('curr').show('fade');
        $('#newgall li:nth-child(2)').addClass('curr').show('fade');
        $('#newgall li:nth-child(3)').addClass('curr').show('fade');
    }
    setTimeout(slide, 4500);
};

slide();

例