所以我有一个div,里面可以有几个div。类似的东西:
<div id="news">
<span>Latest News!</span>
<div>
//News 1
</div>
<div>
//News 2
</div>
</div>
我正在尝试做的是在页面加载时,第一个div是可见的,然后在这么多秒之后,它淡出,第二个div淡入。非常简单的fadeIn和fadeOut但我必须指定每个div的动作。有没有办法说'在我的#news div'中的每个div之间切换?这样我可以添加新的div而无需添加代码来隐藏/显示它们吗?
谢谢!
答案 0 :(得分:3)
// count the number of news items
var len = $("#news div").length;
// hide all but the first
$("#news div:gt(0)").hide();
// set up a counter
var counter = 0;
// function to hide all except the current iteration
function changeDiv() {
$("#news div").eq(counter).show().siblings("div").hide();
counter++;
// when we reach the last one, start again
if(counter === len) {
counter = 0;
}
}
// go!
var i = setInterval(changeDiv, 2000);
答案 1 :(得分:2)
尝试以下
$(document).ready(function() {
$('#news div:gt(0)').hide();
var swap = function(item) {
setTimeout(function() {
$(item).fadeOut(1000, function() {
var next = $(item).next()[0];
if (!next) {
next = $('#news div')[0];
}
$(next).fadeIn(1000, function() {
swap($(this)[0]);
})
});
}, 1000);
};
swap($('#news div')[0]);
});
答案 2 :(得分:1)
你可以尝试使用jQueryUI,它有一个标签控件:http://jqueryui.com/demos/tabs/
否则你可以给所有的div一个普通的类,比如说“tab”。然后,您可以使用标签按钮:
$(".tab").fadeOut();
$("#tab-that-I-want").fadeIn();
答案 3 :(得分:1)
您可能还想研究使用jQuery Cycle插件:
答案 4 :(得分:1)
可能你需要一些内容轮换的插件。
以下是其中一个:http://demo.smartnetzone.com/auto-rotating-tabs-using-jquery/
答案 5 :(得分:1)
这将循环播放新闻。当它到达终点时,它将从顶部开始。将2000更改为您想要的任何间隔(以毫秒为单位)。
function switchNewsItem(){
$('#news div:visible').fadeOut(function(){
$(this).next().length ? $(this).next().fadeIn() : $('#news div').eq(0).fadeIn();
});
};
$('#news div').eq(0).show(); // show the first news item
setInterval(switchNewsItem, 2000);
见工作example。