Javascriptでタブ切り替え効果を実装（拡張版）_JavaScriptスキル

少し前に、タブのタブ切り替えエフェクトを作成しました。今日は、それを元のベースに拡張し、自動カルーセルを追加して、画像カルーセルに似たエフェクトになりました。
html コード:

コードをコピー コードは次のとおりです:

;/title> ;
"text/ css">
a{color:#a0b3d6;}
.tabs{border:1px Solid #a0b3d6;margin:100px;width:300px;}
.tabs-nav a{background :#eaf0fd ;line-height:30px;padding:0 20px;display:inline-block;border-right:1pxソリッド#a0b3d6;border-bottom:1pxソリッド#a0b3d6;float:left;}
.tabs- nav .select1 、.tabs-nav .select2、.tabs-nav .select3、.tabs-nav .select4{background:white;border-bottom:1px 単色白;_position:relative;}
.tabs-content{パディング:20px ;ボーダートップ:1px ソリッド #a0b3d6;マージントップ:-1px;}

class=" タブ" id="タブ">

ホームページ >テクノロジー
生活
作品

ホームページホームページホームページホームページホームページホームページホームページホームページ

ライフ ライフ ライフ ライフ ライフ ライフ

"tabs-content">worksworksworksworks

11111
22222
33333

11111111111111111111111111111111

222222222222222222222222

3333333333333 33333333333333333

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 現在 = 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){
autoPlay();
tabsWrap.onmouseover = function(){
clearInterval(timer);
}
tabsWrap.onmouseout = function(){
autoPlay();
}
}
function autoPlay(){
timer = setInterval(function(){
show(current);
current ;
if(current >= tabsBtn .length){
現在 = 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' (現在の 1);
tabsContent[current].style.display = 'ブロック';
}
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] ] = 要素[i];
}
}
結果を返します。
}
}

PS: これは、本人固有の JavaScript による認識、随意記述によるいくつかの効果です。