js--tab悬浮切换+延时效果+自动轮播

<!DOCTYPE html>
<html>
<head>
   <title></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 #7c7c7c;
       overflow: hidden;
   }
   .notice-tit{
       height:27px;
       background-color: #eaeaea;
       position:relative;
   }
   .notice-tit ul{
       position: absolute;
       width:300px;
       left:-1px;
   }
   .notice-tit ul li{
       float:left;
       width:58px;
       height:26px;
       line-height: 26px;
       text-align: center;
       border-bottom:1px solid #7c7c7c;
       padding:0 1px;
   }
   .notice-tit ul a{
       text-decoration: none;
       display:block;
   }
   .notice-tit ul .select{
       background-color: white;
       border-right:1px solid #7c7c7c;
       border-left:1px solid #7c7c7c;
       border-bottom: 1px solid white;
       padding:0;
   }
   </style>
</head>
<body>
   <div 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 class="notice-con" id="notice-con">
           <div style="display: block;">我是内容1</div>
           <div style="display: none;">我是内容2</div>
           <div style="display: none;">我是内容3</div>
           <div style="display: none;">我是内容4</div>
           <div style="display: none;">我是内容5</div>
       </div>
   </div>

   <script type="text/javascript">
       //获取id封装成一个函数$()方便调用
       function $(id) {
           //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
           return typeof id==="string"?document.getElementById(id):id;
       }
       //声明索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
           var index=0,timer=null,timer2=null;
           var titles=$('notice-tit').getElementsByTagName('li');
           var divs=$('notice-con').getElementsByTagName('div');
       function common(args){
           for(var i=0;i<titles.length;i++){
               titles[i].className="";
               divs[i].style.display="none";
           }
           titles[args].className="select";
           divs[args].style.display="block";
       }
       function tab(){
           for(var j=0;j<titles.length;j++){
               //给每个li设置ID
               titles[j].id=j;
               //给每个li绑定悬浮事件
               titles[j].οnmοuseοver=function(){
                   //悬浮时首先清除延时定时器
                   clearInterval(timer);
                   //清除轮播定时器
                   clearTimeout(timer2);
                   //初始化两个定时器
                   timer2=null;
                   timer=null;
                   //this的一个引用，因为在setTimeout中this指向window对象
                   var that=this;
                   //创建一个延时定时器
                   timer2=setTimeout(function(){
                       common(that.id);
                       //鼠标悬浮时改变index的值为当前的id
                       index=that.id;
                   },500);
               }
               //给每个Li绑定鼠标离开事件
               titles[j].οnmοuseοut=function(){
                   //创建一个轮播定时器，离开时轮播能继续进行，因为上面设置了index=that
                   //所以鼠标离开后会自动播放下一个tab
                   timer=setInterval(function(){
                       index++;
                       if(index>=titles.length){
                           index=0;
                       }
                       common(index);
                   },2000);
               }
           }
           //创建之前看是否存在轮播定时器，有就清除掉
           if(timer){
               clearInterval(timer);
               timer=null;
           }
           //创建一个轮播定时器
           timer=setInterval(function(){
               index++;
               if(index>=titles.length){
                   index=0;
               }
               common(index);
           },2000);
       }
       tab();
   </script>
</body>

</html>

来源：CSDN

作者：凉城以北夜微凉

链接：https://blog.csdn.net/hello_mujinhua/article/details/78982269

标签

轮播