Some time ago wrote a tabs tab switching effect, today in the original based on the expansion, joined the automatic Carousel, which became similar to the effect of the picture carousel.
HTML code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>js-tabs</title>
<link rel= "stylesheet" type= text/css "href=". /css/base.css "media=" All "/>
<style type= "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 solid #a0b3d6; border-bottom:1px solid #a0b3d6; float:left;}
. Tabs-nav. Select1,.tabs-nav. Select2,.tabs-nav Select3,.tabs-nav. select4{background:white;border-bottom:1px Solid white;_position:relative;}
. tabs-content{padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
</style>
<body>
<div class= "Tabs" id= "tabs" >
<a href= "javascript:;" > Home </a>
<a href= "javascript:;" > Technology </a>
<a href= "javascript:;" > Life </a>
<a href= "javascript:;" > Works </a>
<p class= "Tabs-content" > Home Home Home home page home first home </p>
<p class= "Tabs-content" > Technical Technical Technical Technical technical technology </p>
<p class= "Tabs-content" > Living, Living, living, living, living, living </p>
<p class= "Tabs-content" works works of work works of works of works of work > Works </p>
</div>
<br/><br/>
<div class= "tabs" id= "TABS2" >
<a href= "javascript:;" >11111</a>
<a href= "javascript:;" >22222</a>
<a href= "javascript:;" >33333</a>
<p class= "Tabs-content" >11111111111111111111111111111111111</p>
<p class= "Tabs-content" >222222222222222222222222222222222222</p>
<p class= "Tabs-content" >333333333333333333333333333333333333333</p>
</div>
</body>
<script type= "Text/javascript" src= "Tabs.js" ></script>
<script type= "Text/javascript" >
Window.onload = function () {
Tabs (' Tabs ', ' click ', true,1000);
Tabs (' TABS2 ', ' mouseover ');
}
</script>
Tabs.js Code:
Copy Code code as follows:
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: This is my idle boring, through their own learning JavaScript knowledge, random write some effects.
