javascript实现tabs选项卡切换效果(扩展版)_javascript技巧



前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。
html 代码：
代码如下:

首页
技术
生活
作品

首页首页首页首页首页首页首页首页首页首页

技术技术技术技术技术技术技术技术技术技术

生活生活生活生活生活生活生活生活生活生活

作品作品作品作品作品作品作品作品作品作品

11111
22222
33333

11111111111111111111111111111111111

222222222222222222222222222222222222

333333333333333333333333333333333333333

window.onload = function(){
tabs('tabs','click',true,1000);
tabs('tabs2','mouseover');
}


tabs.js 代码：
代码如下:
function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id);
var tabsBtn = tabsWrap.getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = getClass('tabs-content',tabsWrap);
var timer = null;
var current = 0;
show(0);
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
show(this.index);
}
}
}
if(autoplay){
autoPlay();
tabsWrap.onmouseover = function(){
clearInterval(timer);
}
tabsWrap.onmouseout = function(){
autoPlay();
}
}
function autoPlay(){
timer = setInterval(function(){
show(current);
current++;
if(current >= tabsBtn.length){
current = 0;
}
},time);
}
function show(n){
current = n;
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].className = '';
tabsContent[i].style.display = 'none';
}
tabsBtn[current].className = 'select' + (current + 1);
tabsContent[current].style.display = 'block';
}
function getClass(classname,obj){
var results = [];
var elems = obj.getElementsByTagName('*');
for(var i = 0; i < elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}

PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。