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的闭包的一个示例说明
Nov 18 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
原生JS轮播图插件
Feb 09 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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
中国第一家无线电行
2021/03/01 无线电
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
node文字生成图片的示例代码
2017/10/26 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python