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

更新时间：2013年07月13日 14:12:33 作者：

这篇文章介绍了Jquery封装tab自动切换效果的具体实现方法，有需要的朋友可以参考一下

今天我这边网速真是太慢了，打开一个网页要等待很久，但是还是想写篇文章----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();

您可能感兴趣的文章:

探讨JQUERY JSON的反序列化类 using问题的解决方法
本篇文章是对JQUERY JSON的反序列化类 using问题的解决方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
jQuery实现的右下角广告窗体跟随效果示例
这篇文章主要介绍了jQuery实现的右下角广告窗体跟随效果,涉及jQuery结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下
2016-09-09
jquery显示隐藏input对象
这篇文章主要介绍了jquery显示隐藏input对象,需要的朋友可以参考下
2014-07-07
jQuery中选择器小问题(新人难免遇到)
写用户注册验证时遇到的jQuery选择器问题，下面做下记录，有遇到类似情况的朋友可以参考下
2014-03-03
jQuery实现遍历XML节点和属性的方法示例
这篇文章主要介绍了jQuery实现遍历XML节点和属性的方法,涉及jQuery针对xml文件的加载、节点遍历等相关操作技巧,需要的朋友可以参考下
2018-04-04
再次分享18个非常棒的jQuery表格插件
我们一般都是用HTML表格来显示结构化数据，如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据，增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件，有用到朋友可以参考一下。
2011-04-04
jQuery生成假加载动画效果
在使用PDFObject.js时，由于后台需要转换数据，在前台显示的时候，有很长一段时间显示空白页面，所以想到写一个假的加载动画，下面看下实现代码
2016-12-12
jQuery实现Select左右复制移动内容
这篇文章主要介绍了基于jQuery实现Select左右复制移动内容的实现方法，代码非常简单，具有参考借鉴价值，需要的朋友参考下
2016-08-08
jQuery自制提示框tooltip改进版
这篇文章主要介绍了jQuery自制提示框tooltip改进版，将tooltip内容加上图片预览，感兴趣的小伙伴们可以参考一下
2016-08-08
简单介绍jsonp 使用小结
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据，本文给大家简单介绍jsonp 使用小结，需要的朋友参考下
2016-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具