您的位置：首页 > Web前端 > JavaScript

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

2018-01-05 15:55 423 查看

<!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].onmouseover=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].onmouseout=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航