HTML+CSS+DOM实现选项卡自动切换（鼠标经过停止，离开定时切换）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 0;
font: arial "微软雅黑";
}
div{
background-color:#CCCCCC ;
border:2px solid black;
margin: auto;
}
.d1{
width: 400px;
height:180px;
}
.middle{
border: 3px;
text-align: center;
}
.c0{
float:left;
list-style-type:none;
background-color: #f5f5f5;
border:1px solid #CCCCCC ;
text-align: center;
width: 80px;
height: 25px;
cursor: pointer;
}
ul{
list-style:none;
float:none;
}
.c1{
float:left;
list-style-type:none;
background:blanchedalmond;
border:1px solid burlywood ;
text-align: center;
width: 80px;
height: 25px;
cursor: pointer;
}
.none{
display: none;
}
.block{
display: block;
text-align: center;
}
#middle ul{
padding-left: 3px;
}
</style>
<script type="text/javascript">
//var d2=document.getElementById("d2");
//var li=d2.getElementsByTagName("li");
//alert(document.getElementById("list").getElementsByTagName("li").length)
var num=1;
var len=4;
ass();
function aa(b){
for(var i=0;i<len;i++){
if(i==b){
//获取id值更改 该id标签的class名，通过class更改标签属性
document.getElementById("u"+i).className="block";
document.getElementById("l"+i).className="c1";
num=i;
}
else{
document.getElementById("u"+i).className="none";
document.getElementById("l"+i).className="c0";
}
}
}
//鼠标经过停止循环函数
function bb(c){
clearInterval(timer);
aa(c);
}
//循环函数
function ass(){
timer = setInterval(function(){num=(num)%len;aa(num);num++;},1000);
}
</script>
</head>
<body>
<div class="d1" >
<div >
<ul id="list">
<li id="l0" class="c1" onmousemove="bb(0)" onmouseout="ass()">第一标题</li>
<li id="l1" class="c0" onmousemove="bb(1)" onmouseout="ass()">第二标题</li>
<li id="l2" class="c0" onmousemove="bb(2)" onmouseout="ass()">第三标题</li>
<li id="l3" class="c0" onmousemove="bb(3)" onmouseout="ass()">第四标题</li>
</ul>
</div>
</br>
<div id="middle">
<ul id="u0" class="block">
<li>老师你好帅好帅好帅好帅好帅!</li>
<li>11111111111111111111111</li>
<li>11111111111111111111111</li>
<li>11111111111111111111111</li>
</ul>
<ul id="u1" class="none">
<li>老师你好帅好帅好帅好帅好帅!</li>
<li>22222222222222222222222</li>
<li>22222222222222222222222</li>
<li>22222222222222222222222</li>
</ul>
<ul id="u2" class="none">
<li>老师你好帅好帅好帅好帅好帅!</li>
<li>33333333333333333333333</li>
<li>33333333333333333333333</li>
<li>33333333333333333333333</li>
</ul>
<ul id="u3" class="none">
<li>老师你好帅好帅好帅好帅好帅!</li>
<li>44444444444444444444444</li>
<li>44444444444444444444444</li>
<li>44444444444444444444444</li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号