js多Tab自动切换，带完善的鼠标事件，幸凡制作!
说明：打开鼠标时间后，鼠标经过标题时显示相应内容，鼠标经过标题或经过内容时停止自动切换，当鼠标移开时继续自动切换。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js多Tab自动切换,带完善的鼠标事件，幸凡制作http://www.86y.org</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
*{margin:0;padding:);}
body{font-size:25px}
.tab_title{height:30px;line-height:30px;overflow:hidden;}
.tab_title a,.tab_title a:link,.tab_title a:visited{padding:0 8px;display:block;background:#960;float:left;color:#fff;margin-right:5px;font-size:14px;}
.tab_title a:hover {background:#999}
.tab_title a.crent_tab:link {background:#ff0000}
.tab_title a.crent_tab:visited {background:#ff0000}
#tab_lista,#tab_listb,#tab_listc,#tab_listd{width:400px;}
#tab_lista p.crent_div,#tab_listb p.crent_div,#tab_listc p.crent_div,#tab_listd p.crent_div{clear:both;font-size:20px;display:block;}
#tab_lista p,#tab_listb p,#tab_listc p,#tab_listd p{display:none;margin:0;padding:5px;}
#tab_lista p{background:#ccc}
#tab_listb p {background:#ff9}
#tab_listc p{background:#6ff}
#tab_listd p{background:#f90;}
</style>
</head>
<body>
<div id="tab_lista">
<div class="tab_title">
<a href="#" class="crent_tab" id="a1">1</a>
<a href="#" id="a2">2</a>
<a href="#" id="a3">3</a>
<a href="#" id="a4">4</a>
<a href="#" id="a5">5</a>自动切换时间5秒
</div>
<p class="crent_div" id="tab_a1">1</p>
<p id="tab_a2">2</p>
<p id="tab_a3">3</p>
<p id="tab_a4">4</p>
<p id="tab_a5">5</p>
</div>
<div id="tab_listb">
<div class="tab_title">
<a href="#" class="crent_tab" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>自动切换时间3秒，已打开鼠标事件
</div>
<p class="crent_div" id="tab_b1">b1</p>
<p id="tab_b2">b2</p>
<p id="tab_b3">b3</p>
<p id="tab_b4">b4</p>
<p id="tab_b5">b5</p>
<p id="tab_b6">b6</p>
</div>
<div id="tab_listc">
<div class="tab_title">
<a href="#" class="crent_tab" id="c1">c1</a>
<a href="#" id="c2">c2</a>
<a href="#" id="c3">c3</a>不自动切换，鼠标事件打开
</div>
<p class="crent_div" id="tab_c1">c1</p>
<p id="tab_c2">c2</p>
<p id="tab_c3">c3</p>
</div>
<div id="tab_listd">
<div class="tab_title">
<a href="#" class="crent_tab" id="d1">c1</a>
<a href="#" id="d2">c2</a>
<a href="#" id="d3">c3</a>自动切换，鼠标事件打开
</div>
<p class="crent_div" id="tab_d1">d1</p>
<p id="tab_d2">d2</p>
<p id="tab_d3">d3</p>
</div>
<script type="text/javascript">
var $=function(id){return "string"==typeof id?document.getElementById(id):id;};
//设置切换
var ss=new Array;
//ss["标识"]=Array(数量,时间(毫秒),"change","是否打开自动切换",0,"是否开启鼠标事件");
ss["a"]=Array(5,5000,"change",true,0,false);
ss["b"]=Array(6,3000,"change",true,0,true);
ss["c"]=Array(3,2000,"change",false,0,true);
ss["d"]=Array(3,3000,"change",true,0,true);
//鼠标设置及执行自动切换
for(var s in ss){
mouses(s);
autochange(s);
}
//鼠标事件函数
function mouses(s){
if(ss[s][5]){
for(var i=1;i<=ss[s][0];i++){
$(s+i).onmouseover=function(){clearTimeout(ss[s][2]);changeonce(s,this.attributes.getNamedItem("id").nodeValue.split(s)[1]);}
$(s+i).onmouseout=function(){ss[s][4]=0;autochange(s);}
$("tab_"+s+i).onmouseover=function(){clearTimeout(ss[s][2]);changeonce(s,this.attributes.getNamedItem("id").nodeValue.split("tab_"+s)[1]);}
$("tab_"+s+i).onmouseout=function(){ss[s][4]=0;autochange(s);}
}
}
}
//切换一次函数
function changeonce(s,id){
for(var i=1;i<=ss[s][0];i++){
if(i==id) {
$(s+i).className="crent_tab";
$("tab_"+s+i).className="crent_div";
} else {
$(s+i).className="";
$("tab_"+s+i).className="";
}
}
}
//自动切换函数
function autochange(s){
if(ss[s][3]){
for(var i=1;i<=ss[s][0];i++){
if($(s+i).className=="crent_tab"){
var id=ss[s][4]?(i%ss[s][0]?i+1:1):i;
break;
}
}
changeonce(s,id);
ss[s][2] = setTimeout("autochange(\""+s+"\");",ss[s][1]);
ss[s][4]=1;
}else{
return false;
}
}
</script>
</body>
</html>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)