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


Posted in Javascript onJuly 13, 2013

  今天我这边网速真是太慢了,打开一个网页要等待很久,但是还是想写篇文章----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();
Javascript 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 #Javascript
js confirm()方法的使用方法实例
Jul 13 #Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 #Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 #Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 #Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 #Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
js中日期的加减法
2015/05/06 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Django models文件模型变更错误解决
2020/05/11 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
高中生校园生活自我评价
2013/09/19 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
事业单位辞职信范文
2014/01/19 职场文书
培训专员岗位职责
2014/02/26 职场文书
大课间活动实施方案
2014/03/06 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
物业保安岗位职责
2014/07/02 职场文书
工作说明书格式
2014/07/29 职场文书
三严三实对照检查材料
2014/08/25 职场文书
任命书格式模板
2015/09/22 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript