<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>div轮显</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<style>
.red {
color : red;
}
div {
margin : 10px;
}
div.t {
width : 550px;
borders : 1px solid red;
}
div.t div{
float : left;
border : 1px solid #FFFFFF;
}
.content {
display : none;
}
</style>
<script>
var i=1; // 当前有所在标签
var count=0; // 标签总数
var state=1; // 状态
var time=4000; // 轮显时间
$(function(){
$("div.title").each(function (a) {
$(this).bind("click",function() {
state = 0;
i = a;
go(i);
});
});
count = $("div.title").length;
count = count-1;
setTimeout("go(i)",time);
})
function go(value) {
play(value);
showdiv(value);
if(state) {
if(i<count) {
i++;
} else {
i = 0;
}
setTimeout("go(i)",time);
}
state = 1;
}
function play(value) {
$("div.title").each(function(b){
if(i==b) {
$("div.title").removeClass("red");
$(this).addClass("red");
}
});
}
function showdiv(value) {
$("div.content").each(function(c){
if(i==c) {
$("div.content").hide();
$(this).show();
}
});
}
</script>
</head>
<body>
<div>
<div class="t">
<div class="title red">标题1</div>
<div class="title">标题1</div>
<div class="title">标题2</div>
<div class="title">标题3</div>
<div class="title">标题4</div>
<div class="title">标题5</div>
<div class="title">标题6</div>
</div>
<div style="clear:both;"></div>
<div class="content" style='display:block;'>内容内容内容</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
<div class="content">内容4</div>
<div class="content">内容5</div>
<div class="content">内容6</div>
</div>
</body>
</html>