javascript實作tabs選項卡切換效果(擴充版)_javascript技巧

前段時間寫了個tabs 選項卡切換效果，今天抽空在原有的基礎上進行了擴展，加入了自動輪播，這樣就變成了類似圖片輪播的效果了。
html 程式碼：

複製程式碼 程式碼如下:

首頁
技術
生活
作品

首頁首頁首頁首頁首頁首頁首頁首頁

技術技術技術技術技術技術技術技術技術

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

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

11111
22222
33333

11111111111111111111111111111111111

222222222222222212222222222222222222222222222222222222點(2222222222222222222222222222999999999999 日製作 是9.(22222222222222222222222222222222222229999999999年 3333333333333333333333333333333333333333

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 計時器 = null;
var 目前 = 0;
顯示(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();
tabsWrap.onmouseover = function(){
clearInterval(timer);
}
tabsWrap.onmouseout = function(){
autoPlay();
}
}
function autoPlay(){
timer = setInterval(function(){
show(current);
current ;
if(current >= tabsBtn .長度){
目前= 0
}
},時間);
}
函數 show(n){
當前 = n;
for(var i = 0,len = tabsBtn.length; i tabsBtn[i].className = '';
tabsContent[i].style.display = 'none';
}
tabsBtn[current].className = 'select' (目前 1);
tabsContent[目前].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.length ] = 元素[i];
}
}
回傳結果；
}
}

PS：這是自己閒著無聊，透過自己所學的javascript知識，隨意寫出一些效果。