js多Tab自动切换,带完美的鼠标事件
日期：2014-05-16 浏览次数：20438 次
js多Tab自动切换,带完善的鼠标事件
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.ok22.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_b设置及执行自动切换
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>
?来自:http://www.ok22.org/art_detail.aspx?id=119
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
