越简单越好!

div轮显

bevin 发表于 2007-08-20 16:51 | 9次阅读 0次推荐   JavaScript

<!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>

+0
发表评论
×您的大名会显示在评论处

评论内容不能少于5个字哦~~~

评论列表
当前暂无评论
发送数据中... 请求错误. 请输入评论内容和验证码后再发布 您已经参与过了,谢谢
返回顶部 ^