[英]Display multiple content items from a dynamic list (Wordpress WP-Query) with Javascript Slide Effect
[英]Display multiple content items from an unordered list with javascript
我想使以下代碼一次按時間順序顯示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的最新帖子。 謝謝您的幫助!
您可以使用模運算符來計算將在每個步驟中顯示的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();
如果您要查找的列表一次要增加一項,而不是三項,則可以使用:
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();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.