当鼠标移动的时候，停止自动切换，当鼠标移除的时候继续自动切换
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
.notice{
height:98px;
width:298px;
border:1px solid #eee;
overflow:hidden;
}
.notice-tit{
height:27px;
position:relative;
}
.notice-tit ul{
list-style:none;
position:absolute;
width:301px;
left:-1;
}
.notice-tit ul li{
float:left;
width:58px;
height:26px;
padding:0 1px;
text-align:center;
line-height:26px;
overflow:hidden;
background:#F7F7F7;
border-bottom:1px solid #eee;
}
.notice-tit ul li.select{
background:#fff;
border-bottom-color:#fff;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0;
}
.notice ul li a:link,.notice ul li a:visited{
text-decoration:none;
color:#000;
}
.notice ul li a:hover{
color:#f90;
}
.notice-con .mod{
margin:10px 15px;
}
.notice-con .mod ul li{
float:left;
width:134px;
height:25px;
overflow:hidden;
}
</style>
<script>
function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}
window.onload = tab;
function tab(){
//当前高亮显示的页签的索引
var index = 0;
var timer = null;
//获取所有的页签和要切换的内容
var lis = $('notice-tit').getElementsByTagName('li');
var divs = $('notice-con').getElementsByTagName('div');
//遍历每一个页签且给他们绑事件
for(var i=0;i<lis.length;i++){
lis[i].id = i;
lis[i].onmouseover = function(){
clearInterval(timer);
change(this.id);
}
lis[i].onmouseout = function(){
timer = setInterval(autoPlay,2000);
}
}
if(timer){
clearInterval(timer);
timer = null;
}
//添加定时,器改变当前高亮的索引
timer = setInterval(autoPlay,2000);
function autoPlay(){
index++;
if(index >= lis.length){
index = 0;
}
change(index);
}
function change(curIndex){
for(var j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
//高亮显示当前页签
lis[curIndex].className = 'select';
divs[curIndex].style.display = 'block';
index = curIndex;
}
}
</script>
</head>
<body>
<div id="notice" 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 id="notice-con" class="notice-con" >
<div class="mod" style="display:block">
<ul>
<li><a href="#">编写菜单效果1</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果2</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果3</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果4</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果5</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2025-01-07 15:15:20