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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
angular4+百分比进度显示插件用法示例
May 05 Javascript
15分钟上手vue3.0(小结)
May 20 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
php4的session功能评述(一)
2006/10/09 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python实现超简单端口转发的方法
2015/03/13 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python实现调度算法代码详解
2017/12/01 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python如何使用腾讯云发送短信
2020/09/17 Python
文明美德伴我成长演讲稿
2014/05/12 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
员工担保书范本
2015/09/22 职场文书
python tqdm用法及实例详解
2021/06/16 Python
Python字典的基础操作
2021/11/01 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server