<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hover()方法切换事件</title>
<style>
*{padding:0px;margin:0px;
list-style:none;font-size:17px;}
#wrap{width:300px;border:1px solid #eee;margin:0 auto;overflow:hidden}
#header{height:35px;background:#eee}
#wrap #header ul li{float:left;line-height:35px;height:35px;width:58px;text-align:center;list-style:none;border-left:1px solid #fff;
border-right:1px solid #fff;}
.aa{background:white;font-weight:bold;}
#content p{line-height:40px;text-align:center;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<ul>
<li class="aa">公告</li>
<li class="bb">公告</li>
<li class="cc">公告</li>
<li class="dd">公告</li>
<li class="ee">公告</li>
</ul>
</div>
<div id="content">
<p class="one">
方法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠.
</p>
<p class="two" style="display:none">
pp法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠,
方法的功能是当鼠.
</p>
<p class="three" style="display:none">
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
</p>
<p class="four" style="display:none">
ha法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
</p>
<p class="five" style="display:none" >
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
方法的功能是当鼠
</p>
</div>
</div>
<script>
window.onload=function(){
var l=document.getElementsByTagName("li")
var u=document.getElementsByTagName("p")
var k=0;
time=setInterval(function(){
k++;
if(k>=l.length){
k=0
}
for(j=0;j<l.length;j++){
l[j].className="";
u[j].style.display="none"
}
l[k].className="aa"
u[k].style.display="block"
},2000)
for(i=0;i<l.length;i++){
l[i].index=i
l[i].onmouseover=function (){
clearInterval(time)
var that=this;
setTimeout(function(){
for(j=0;j<l.length;j++){
l[j].className="";
u[j].style.display="none"
}
that.className="aa"
u[that.index].style.display="block"
},2000)
}
}
l[i].onmouseout=function(){
//这里怎么写//
}
}
</script>
</body>
</html>怎样让鼠标移开后，调用第一个setInterval函数，复制time来还是没有效果.
相关分类