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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
jquery的map与get方法详解
Nov 04 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
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
php eval函数用法总结
2012/10/31 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
如何利用python查找电脑文件
2018/04/27 Python
解决python报错MemoryError的问题
2018/06/26 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
党员检讨书范文
2014/12/27 职场文书
2015年党员承诺书
2015/01/21 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Python3.10的一些新特性原理分析
2021/09/15 Python