今天我这边网速真是太慢了打开一个网页要等待很久但是还是想写篇文章tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下！ 当然这是我用Jquery来封装的 页面可以调用多次 调用方式 new tabSlider(objcount); obj指容器最外层IDcount指有多个li 当然要引用我这个js的话 一定要按照我结构来写！下面的是我的HTML一些结构如下
复制代码 代码如下:
<div id="tab
">
<ul class="menu">
<li class="current">tab
</li>
<li>tab
</li>
<li>tab
</li>
<li class="last
col">tab
</li>
</ul>
<div class="content
main">
<div class="content">tab
</div>
<div class="content hide">tab
</div>
<div class="content hide">tab
</div>
<div class="content hide">tab
</div>
</div>
</div>
结构是这样的！下面是我页面上的HTML/CSS的代码！
复制代码 代码如下:
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>无标题文档</title>
<script type="text/javascript" src="
<style>
#tab
{ width:
px; height:
px; overflow:hidden; border:
px solid #
;}
#tab
{ width:
px; height:
px; overflow:hidden; border:
px solid #
;}
menu{ width:
px; height:
px; margin:
; padding:
;}
menu li{ float:left; list
style:none; width:
px; text
align:center; border
bottom:
px solid #
; border
right:
px solid #
; cursor:pointer;}
menu li
current{ border
bottom:none;}
content
main{ width:
px; height:
px; overflow:hidden;}
content{ width:
px; height:
px; overflow:hidden; display:block;}
hide{ display:none;width:
px; height:
px; overflow:hidden;}
menu li
last
col{ border
right:none; width:
px;}
</style>
<script src="AutoTab
js"></script>
</head>
<body>
<div id="tab
">
<ul class="menu">
<li class="current">tab
</li>
<li>tab
</li>
<li>tab
</li>
<li class="last
col">tab
</li>
</ul>
<div class="content
main">
<div class="content">tab
</div>
<div class="hide">tab
</div>
<div class="hide">tab
</div>
<div class="hide">tab
</div>
</div>
</div>
<br /><br />
<div id="tab
">
<ul class="menu">
<li class="current">tab
</li>
<li>tab
</li>
<li>tab
</li>
<li class="last
col">tab
</li>
</ul>
<div class="content
main">
<div class="content">tab
</div>
<div class="hide">tab
</div>
<div class="hide">tab
</div>
<div class="hide">tab
</div>
</div>
</div>
<script>new tabSlider("#tab
"
);</script>
<script>new tabSlider("#tab
"
);</script>
</body>
</html>
JS代码如下
复制代码 代码如下:
// JavaScript Document
/*
*@date
*@ author tugenhua
*@ email tugenhua@
com
*@ 可以一个页面多次引用
依赖的结构 */
<div id="tab
">
<ul class="menu">
<li class="current">tab
</li>
<li>tab
</li>
<li>tab
</li>
<li class="last
col">tab
</li>
</ul>
<div class="content
main">
<div class="content">tab
</div>
<div class="content hide">tab
</div>
<div class="content hide">tab
</div>
<div class="content hide">tab
</div>
</div>
</div>
/*页面引用的方式
new tabSlider("#tab
"
);
#tab
是外部ID
指 一共有多少个li
*/
function tabSlider(obj
count){
var _this = this;
_this
obj = obj;
_this
count = count;
_this
time =
;//停留的时间
_this
n =
;
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
)?
: ++_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的思路因为写任何程序 思路是最重要的只要能想的清楚 代码就一定能实现掉！思路说的更好听的话 就是我们常说的“算法”！
function tabSlider(objcount){} 用这个js来封装后传入参数！当在HTML页面上时直接调用tabSlider(objcount)就可以了！
初始化一些参数 然后给这个函数自生自定义一个函数thisslider = function(){} 绑定个mouseover事件初始化第一个li时 查找当前的div内容是否和当前li 指向同一个指针 如果相同 那块内容显示！其他的隐藏！
自定义thisaddHover这个事件 当鼠标移上时候抽发这个事件！
自定义自动播放事件thisautoplay = function(){} 这个里面用了trigger这个触发方法_thisn = _thisn >=(_thiscount)? : ++_thisn;
$(_thisobj + " menu li")eq(_thisn)trigger("mouseover");
最后用个函数 来渲染上面的函数 调用上面的函数
复制代码 代码如下:
thisfactory = function(){
thisslider();
thisaddhover();
t = setInterval(thisautoplay_thistime);
}
thisfactory();
