继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Jquery封装tab自动切换效果荐

所谓伊人_在水一方
关注TA
已关注
手记 273
粉丝 23
获赞 169

      今天我这边网速真是太慢了,打开一个网页要等待很久,但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下! 当然这是我用Jquery来封装的 页面可以调用多次 调用方式                new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写!下面的是我的HTML一些结构如下:

 

<div id="tab1">     <ul class="menu">         <li class="current">tab1</li>         <li>tab2</li>         <li>tab3</li>         <li class="last-col">tab4</li>     </ul>     <div class="content-main">         <div class="content">tab1</div>         <div class="content hide">tab2</div>         <div class="content hide">tab3</div>         <div class="content hide">tab4</div>     </div> </div>

 

结构是这样的!下面是我页面上的HTML/CSS的代码!

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <style> #tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}  #tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}  .menu{ width:196px; height:18px; margin:0; padding:0;}  .menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;}  .menu li.current{ border-bottom:none;}  .content-main{ width:196px; height:200px; overflow:hidden;}  .content{ width:196px; height:200px; overflow:hidden; display:block;}  .hide{ display:none;width:196px; height:200px; overflow:hidden;}  .menu li.last-col{ border-right:none; width:49px;}  </style> <script src="AutoTab.js"></script> </head>  <body>  <div id="tab1">     <ul class="menu">         <li class="current">tab1</li>         <li>tab2</li>         <li>tab3</li>         <li class="last-col">tab4</li>     </ul>     <div class="content-main">         <div class="content">tab1</div>         <div class="hide">tab2</div>         <div class="hide">tab3</div>         <div class="hide">tab4</div>     </div> </div> <br /><br />  <div id="tab2">     <ul class="menu">         <li class="current">tab1</li>         <li>tab2</li>         <li>tab3</li>         <li class="last-col">tab4</li>     </ul>     <div class="content-main">         <div class="content">tab1</div>         <div class="hide">tab2</div>         <div class="hide">tab3</div>         <div class="hide">tab4</div>     </div> </div> <script>new tabSlider("#tab1",4);</script> <script>new tabSlider("#tab2",4);</script> </body> </html>

JS代码如下:

 

// JavaScript Document       /*      *@date 2011 10 24      *@ author tugenhua      *@ email tugenhua@126.com      *@ 可以一个页面多次引用      依赖的结构      <div id="tab1">      <ul class="menu">          <li class="current">tab1</li>          <li>tab2</li>          <li>tab3</li>          <li class="last-col">tab4</li>      </ul>      <div class="content-main">          <div class="content">tab1</div>          <div class="content hide">tab2</div>          <div class="content hide">tab3</div>          <div class="content hide">tab4</div>      </div>  </div>   ×页面引用的方式      new tabSlider("#tab1",4);      #tab1 是外部ID,4 指 一共有多少个li  */  function tabSlider(obj,count){      var _this = this;          _this.obj = obj;          _this.count = count;          _this.time = 2000;//停留的时间          _this.n = 0;          var  t;          this.slider = function(){              $(_this.obj + " .menu li").bind("mouseover",function(event){                  $(event.target).addClass("current").siblings().removeClass("current");                  var index = $(_this.obj + " .menu li").index(this);                  $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();                  _this.n = index;                  })            }          this.addhover = function(){              $(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});           }          this.autoplay = function(){              _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;              $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");              }             this.factory = function(){              this.slider();              this.addhover();              t = setInterval(this.autoplay,_this.time);            }          this.factory();  }

下面来说说下我封装这个js的思路,因为写任何程序 思路是最重要的,只要能想的清楚 代码就一定能实现掉!思路说的更好听的话 就是我们常说的“算法”!

1 function tabSlider(obj,count){} 用这个js来封装后传入参数!当在HTML页面上时直接调用 tabSlider(obj,count)就可以了!

2 初始化一些参数 然后给这个函数自生自定义一个函数 this.slider = function(){} 绑定个mouseover事件,初始化第一个li时 查找当前的div内容是否和当前li 指向同一个指针 如果相同 那块内容显示!其他的隐藏!

3 自定义this.addHover这个事件  当鼠标移上时候抽发这个事件!

4 自定义自动播放事件this.autoplay = function(){} 这个里面用了trigger这个触发方法 _this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
   $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");

5 最后用个函数 来渲染上面的函数 调用上面的函数

this.factory = function(){
   this.slider();
   this.addhover();
   t = setInterval(this.autoplay,_this.time); 
  }
  this.factory();

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP