javascript实现tabs选项卡切换效果(扩展版)_javascript技巧
程序员文章站
2022-04-14 21:04:40
...
前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了。
html 代码:
js-tabs
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 知识,随意写的一些效果。
html 代码:
复制代码 代码如下:
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 知识,随意写的一些效果。
上一篇: linux系统下文件的权限设置
下一篇: 如何在PHP中进行会话处理?
推荐阅读
-
7、JavaScript总结——实现选项卡切换的效果
-
纯js实现背景图片切换效果代码_javascript技巧
-
js(JavaScript)实现TAB标签切换效果的简单实例_javascript技巧
-
使用javascript实现简单的选项卡切换_javascript技巧
-
使用javascript实现简单的选项卡切换_javascript技巧
-
js实现简单选项卡与自动切换效果的方法_javascript技巧
-
js实现绿白相间竖向网页百叶窗动画切换效果_javascript技巧
-
js(JavaScript)实现TAB标签切换效果的简单实例_javascript技巧
-
js实现仿Windows风格选项卡和按钮效果实例_javascript技巧
-
JS实现网页顶部向下滑出的全国城市切换导航效果_javascript技巧