您的位置：首页 > 其它

通用TAB-有自动轮换功能

2011-10-29 15:40 204 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用TAB-有自动轮换功能</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
list-style:none;
}
.cur {
color:#000;
background-color:#FFF;
}
.red {
font-size: 20px;
font-weight: bolder;
}
#lxfTab-click {
-moz-border-radius:5px;
background-color:#069;
width:600px;
overflow:hidden;
padding:2px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}

#lxfTab-click .title {
color:#FFF;
}
#lxfTab-click .title li {
float:left;
padding:1px;
cursor:pointer;
width:40px;
margin:8px 0 8px 8px;
border:1px solid #FFF;
-moz-border-radius:5px;
text-align:center;
}
#lxfTab-click .content {
width:600px;
float:left;
}
#lxfTab-click .content li {
word-wrap:break-word;
background-color:#FFF;
padding:6px;
-moz-border-radius:5px;
width: 572px;
margin-top: 0px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
-->

</style>
<script>
$(function() {
$("#lxfTab-click .title li:first").addClass("cur");
$("#lxfTab-click .content li:not(:first)").hide();
$("#lxfTab-click .title li").click(function() {
var index = $("#lxfTab-click .title li").index($(this));
$("#lxfTab-click .title li").removeClass("cur");
$(this).addClass("cur");
$("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");
$(".now").text(index + 1);
});
/* 自动轮换*/
var i = -1;
//设置起始位置
var speed = 2000;
//设置轮换速度
var n = $("#lxfTab-click .title li").length - 1;
function autoroll() {
if(i >= n) {
i = -1;
}
i++;
$("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");
$("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");
timer = setTimeout(autoroll, speed);
};

/* 鼠标悬停即停止自动轮换 */
function stoproll() {
$("#lxfTab-click li").hover(function() {
clearTimeout(timer);
i = $(this).prevAll().length;
}, function() {
timer = setTimeout(autoroll, speed);
});
};

autoroll();
//执行自动轮换函数
stoproll();
//启动悬停功能

});

</script>
</head>
<body>
<div id="lxfTab-click">
<ul class="title">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
<div class="LRbutton">
<ul>
<li></li><li></li><li></li>
</ul>
</div>
<ul class="content">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航