欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-14 21:04:40
...
前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了。
html 代码:
复制代码 代码如下:





js-tabs






首页
技术
生活
作品


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


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


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


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








11111
22222
33333


11111111111111111111111111111111111


222222222222222222222222222222222222


333333333333333333333333333333333333333








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 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 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 if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}

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