可自动切换选项卡

最新推荐文章于 2022-08-09 10:17:53 发布

YZiAngel

最新推荐文章于 2022-08-09 10:17:53 发布

阅读量841

点赞数

分类专栏：前端工程师

本文链接：https://blog.csdn.net/YZi_Angel/article/details/47156385

版权

前端工程师专栏收录该内容

52 篇文章 0 订阅

订阅专栏

当鼠标移动的时候，停止自动切换，当鼠标移除的时候继续自动切换

代码如下：

<!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>