总结:
index=curIndex; 让自动播放的 i 与 onmouseover 的 i 相等, 要不然打架.
在 for 循环里要写上 lis[i].id=i; 这样就可以知道当前事件是几个了
this.id
html 代码
- <!doctype html>
- <html lang="'en">
- <head>
- <meta charset="UTF-8">
- <title>Tab 切换 - 自动 </title>
- <style type="text/CSS">
- *{margin:0;
- padding:0;
- list-style:none;
- font-size:12px;}
- .notice{width:298px;
- height:98px;
- margin:10px;
- border:1px solid #eee;
- overflow:hidden;}
- .notice-tit{height:27px;
- position:relative;
- background:#F7F7F7;}
- .notice-tit ul{position:absolute;
- width:301px;
- left:-1px;}
- .notice-tit li{float:left;
- width:58px;
- height:26px;
- line-height:26px;
- text-align:center;
- overflow:hidden;
- background:#FFF;
- padding:0 1px;
- background:#F7F7F7;
- border-bottom:1px solid #eee;}
- .notice-tit li.select{background:#FFF;
- border-bottom-color:#FFF;
- border-left:1px solid #eee;
- border-right:1px solid #eee;
- padding:0;
- font-weight:bolder;}
- .notice li a:link,.notice li a:visited{text-decoration:none;
- color:#000;}
- .notice li a:hover{color:#F90;}
- .notice-con .mod{margin:10px 6px;display: none}
- .notice-con .mod ul li{float:left;
- width:143px;
- height:25px;
- overflow:hidden;
- }
- </style>
- </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="#">
- 张勇: 要玩快乐足球
- </a>
- </li>
- <li>
- <a href="#">
- 阿里 2000 万驰援灾区!
- </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>
- <script type="text/javascript">
- // 当前高亮显示的页签的索引
- var index=0;
- var timer=null;
- // 获取所有的页签和要切换的内容
- var lis=document.getElementById('notice-tit').getElementsByTagName('li');
- var divs=document.getElementById('notice-con').getElementsByTagName('div');
- // 遍历每一个页签且给他们绑定事件
- for(var i=0;i<lis.length;i++){
- lis[i].id=i;
- lis[i].onmouseover=function(){
- clearInterval(timer);
- changeOption(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;
- }
- changeOption(index);
- }
- function changeOption(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>
- </body>
- </html>
来源: http://www.qdfuns.com/article/37477/4b803e6e15d2b0b22f79961a7e9e001a.html