<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
font-size: 12px;
}
.notice{
width:298px;
height:98px;
margin:10px;
border:1px solid #7c7c7c;
overflow: hidden;
}
.notice-tit{
height:27px;
background-color: #eaeaea;
position:relative;
}
.notice-tit ul{
position: absolute;
width:300px;
left:-1px;
}
.notice-tit ul li{
float:left;
width:58px;
height:26px;
line-height: 26px;
text-align: center;
border-bottom:1px solid #7c7c7c;
padding:0 1px;
}
.notice-tit ul a{
text-decoration: none;
display:block;
}
.notice-tit ul .select{
background-color: white;
border-right:1px solid #7c7c7c;
border-left:1px solid #7c7c7c;
border-bottom: 1px solid white;
padding:0;
}
</style>
</head>
<body>
<div class="notice">
<div id="notice-tit" class="notice-tit">
<ul>
<li class="select"><a href="#">公告</a></li>
<li><a href="#">規則</a></li>
<li><a href="#">論壇</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div class="notice-con" id="notice-con">
<div style="display: block;">我是內容1</div>
<div style="display: none;">我是內容2</div>
<div style="display: none;">我是內容3</div>
<div style="display: none;">我是內容4</div>
<div style="display: none;">我是內容5</div>
</div>
</div>
<script type="text/javascript">
//獲取id封裝成一個函數$()方便調用
function $(id) {
//如果傳入的參數類型爲字符串則獲取當前ID元素，否則返回id
return typeof id==="string"?document.getElementById(id):id;
}
//聲明 索引index，兩個變量來裝定時器，一個輪播定時器，一個延時定時器
var index=0,timer=null,timer2=null;
var titles=$('notice-tit').getElementsByTagName('li');
var divs=$('notice-con').getElementsByTagName('div');
function common(args){
for(var i=0;i<titles.length;i++){
titles[i].className="";
divs[i].style.display="none";
}
titles[args].className="select";
divs[args].style.display="block";
}
function tab(){
for(var j=0;j<titles.length;j++){
//給每個li設置ID
titles[j].id=j;
//給每個li綁定懸浮事件
titles[j].onmouseover=function(){
//懸浮時首先清除延時定時器
clearInterval(timer);
//清除輪播定時器
clearTimeout(timer2);
//初始化兩個定時器
timer2=null;
timer=null;
//this的一個引用，因爲在setTimeout中this指向window對象
var that=this;
//創建一個延時定時器
timer2=setTimeout(function(){
common(that.id);
//鼠標懸浮時改變index的值爲當前的id
index=that.id;
},500);
}
//給每個Li綁定鼠標離開事件
titles[j].onmouseout=function(){
//創建一個輪播定時器，離開時輪播能繼續進行，因爲上面設置了index=that
//所以鼠標離開後會自動播放下一個tab
timer=setInterval(function(){
index++;
if(index>=titles.length){
index=0;
}
common(index);
},2000);
}
}
//創建之前看是否存在輪播定時器，有就清除掉
if(timer){
clearInterval(timer);
timer=null;
}
//創建一個輪播定時器
timer=setInterval(function(){
index++;
if(index>=titles.length){
index=0;
}
common(index);
},2000);
}
tab();
</script>
</body>
</html>
