实例
<!doctype html>
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<!--<script type="text/javascript">
window.onload=function(){
var num=0;
var timer=null;
//var notice=document.getElementById('notice');
var noticeTit=document.getElementById('notice-tit');
var noticeCon=document.getElementById('notice-con');
var title=noticeTit.getElementsByTagName('li');
var con=noticeCon.getElementsByClassName('mod');
function autoPlay(){
num++;
if(num==title.length){
num=0;
}
showTab(num);
}
// 给tab鼠标移上效果
function showTab(i){
for(var j=0;j<con.length;j++){
con[j].style.display='none';
title[j].className='';
}
con[i].style.display='block';
title[i].className='select';//className 属性设置或返回元素的 class 属性
}
for(var i=0;i<title.length;i++){
title[i].index=i;//index() 方法返回指定元素相对于其他指定元素的 index 位置
title[i].onmouseenter=function(){//onmouseenter 事件在鼠标指针移动到元素上时触发
clearInterval(timer);//clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作
showTab(this.index);//知道的当前显示的div的位置
num=this.index;
}
title[i].onmouseleave=function(){// 在鼠标指针移出元素上时触发
timer=setInterval(autoPlay,1000);
}
}
}
</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="#">
曝范冰冰将参演好莱坞大片《355》曝范冰冰将参演好莱坞大片《355》
</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>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
"滥发"即将换新
</a>
</li>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
比特币严管啦！
</a>
</li>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
禁发商品名录！
</a>
</li>
<li>
<span>
[
<a href="#">通知</a>
]
</span>
<a href="#">
商品属性限制
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>
[
<a href="#">聚焦</a>
]
</span>
<a href="#">
金牌卖家再启航
</a>
</li>
<li>
<span>
[
<a href="#">功能</a>
]
</span>
<a href="#">
橱窗规则升级啦
</a>
</li>
<li>
<span>
[
<a href="#">话题</a>
]
</span>
<a href="#">
又爱又恨优惠劵
</a>
</li>
<li>
<span>
[
<a href="#">工具</a>
]
</span>
<a href="#">
购后送店铺红
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="#">
个人重要信息要管牢！
</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="#">
走进无声课堂
</a>
</li>
<li>
<a href="#">
淘宝之行大众评审赢公益金
</a>
</li>
<li>
<a href="#">
爱心***联合征集
</a>
</li>
<li>
<a href="#">
名公益机构淘宝开店攻略
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
var noticeTit = document.getElementById('notice-tit');
var noticeCon = document.getElementById('notice-con');
var TitLi = noticeTit.getElementsByTagName('li');
var ConLi = noticeCon.getElementsByClassName('mod');
var index;
for(var i=0;i<TitLi.length; i++){
TitLi[i].index = i;
TitLi[i].onmouseenter=function(){
clearInterval(timer);
console.log(this.index)
for(var j=0;j<TitLi.length;j++){
TitLi[j].className = '';
ConLi[j].style.display='none';
TitLi[this.index].className = 'select';
ConLi[this.index].style.display='block';
}
}
TitLi[i].onmouseleave=function(){
timer = setInterval(Show,1000);
}
}
var timer = null;
var num=0;
function Show(){
num++;
if(num == TitLi.length){
num = -1;
} else {
for(var j=0;j<TitLi.length;j++){
TitLi[j].className = '';
ConLi[j].style.display='none';
TitLi[num].className = 'select';
ConLi[num].style.display='block';
}
}
}
timer = setInterval(Show,1000);
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例