提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery封装tab自动切换效果的具体实现

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

<divid="tab1">
   <ulclass="menu">
       <liclass="current">tab1</li>
       <li>tab2</li>
       <li>tab3</li>
       <liclass="last-col">tab4</li>
   </ul>
   <divclass="content-main">
       <divclass="content">tab1</div>
       <divclass="contenthide">tab2</div>
       <divclass="contenthide">tab3</div>
       <divclass="contenthide">tab4</div>
   </div>
</div>

结构是这样的！下面是我页面上的HTML/CSS的代码！
复制代码代码如下:

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scripttype="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:1pxsolid#666;}
#tab2{width:196px;height:220px;overflow:hidden;border:1pxsolid#666;}
.menu{width:196px;height:18px;margin:0;padding:0;}
.menuli{float:left;list-style:none;width:48px;text-align:center;border-bottom:1pxsolid#666;border-right:1pxsolid#666;cursor:pointer;}
.menuli.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;}
.menuli.last-col{border-right:none;width:49px;}
</style>
<scriptsrc="AutoTab.js"></script>
</head>
<body>
<divid="tab1">
   <ulclass="menu">
       <liclass="current">tab1</li>
       <li>tab2</li>
       <li>tab3</li>
       <liclass="last-col">tab4</li>
   </ul>
   <divclass="content-main">
       <divclass="content">tab1</div>
       <divclass="hide">tab2</div>
       <divclass="hide">tab3</div>
       <divclass="hide">tab4</div>
   </div>
</div>
<br/><br/>
<divid="tab2">
   <ulclass="menu">
       <liclass="current">tab1</li>
       <li>tab2</li>
       <li>tab3</li>
       <liclass="last-col">tab4</li>
   </ul>
   <divclass="content-main">
       <divclass="content">tab1</div>
       <divclass="hide">tab2</div>
       <divclass="hide">tab3</div>
       <divclass="hide">tab4</div>
   </div>
</div>
<script>newtabSlider("#tab1",4);</script>
<script>newtabSlider("#tab2",4);</script>
</body>
</html>

JS代码如下：
复制代码代码如下:
//JavaScriptDocument
   /*
   *@date20111024
   *@authortugenhua
   *@emailtugenhua@126.com
   *@可以一个页面多次引用
   依赖的结构*/
   <divid="tab1">
   <ulclass="menu">
       <liclass="current">tab1</li>
       <li>tab2</li>
       <li>tab3</li>
       <liclass="last-col">tab4</li>
   </ul>
   <divclass="content-main">
       <divclass="content">tab1</div>
       <divclass="contenthide">tab2</div>
       <divclass="contenthide">tab3</div>
       <divclass="contenthide">tab4</div>
   </div>
</div>
/*页面引用的方式
   newtabSlider("#tab1",4);
   #tab1是外部ID,4指一共有多少个li
*/
functiontabSlider(obj,count){
   var_this=this;
       _this.obj=obj;
       _this.count=count;
       _this.time=2000;//停留的时间
       _this.n=0;
       var t;
       this.slider=function(){
           $(_this.obj+".menuli").bind("mouseover",function(event){
               $(event.target).addClass("current").siblings().removeClass("current");
               varindex=$(_this.obj+".menuli").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+".menuli").eq(_this.n).trigger("mouseover");    
       }   
       this.factory=function(){
           this.slider();
           this.addhover();
           t=setInterval(this.autoplay,_this.time);  
       }
       this.factory();
}

下面来说说下我封装这个js的思路，因为写任何程序思路是最重要的，只要能想的清楚代码就一定能实现掉！思路说的更好听的话就是我们常说的“算法”！
1functiontabSlider(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+".menuli").eq(_this.n).trigger("mouseover");
5最后用个函数来渲染上面的函数调用上面的函数
复制代码代码如下:
this.factory=function(){
  this.slider();
  this.addhover();
  t=setInterval(this.autoplay,_this.time);
 }
 this.factory();

相关文章