Home >Web Front-end >JS Tutorial >Beautiful js tab image rotation effect code (customizable slideshow and image buffer switching)_advertising code

Beautiful js tab image rotation effect code (customizable slideshow and image buffer switching)_advertising code

PHP中文网Original: 2016-05-16 18:57:421040browse

I accidentally browsed the Internet and found a very beautiful slide effect code. I have compiled it for everyone. It is a very beautiful tab slide effect code. It is implemented by js class and can be modified

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<base href="http://img.jb51.net/online/tab08/" /> 
<style> 
li,ul{margin:0;padding:0;list-style-type:0} 
body{background:#eee; text-align:center;} 
li img{vertical-align:bottom; } 
.dhooo_tab{ 
width:460px; margin:10px; 
background:#fff url(images/main_bg.gif) repeat-x 0 100%; 
border:1px solid #aaa;position:relative; 
float:left; 
} 
.tab_btn li{float:left; width:60px} 
.tab_btn li { 
font-size:12px;display:block; 
padding:10px;margin-right:5px; 
zoom:1;text-decoration:none; 
color:#fff;line-height:50%; 
cursor:pointer; 
} 
.tab_btn li.hot { 
background:#fff; 
color:#333;font-weight:bold; 
cursor:default; 
} 
.tab_btn{ 
overflow:hidden;height:28px; 
padding-left:20px; padding-top:5px; 
background:url(images/tabbar.gif) repeat-x ; 
} 
.tab_btn_num{ 
position:absolute; 
right:50px;bottom:15px; 
} 
.tab_btn_num li{ 
width:20px;height:20px; 
background: #CC3300; 
border:2px solid #993300; 
overflow:hidden; color:#fff; 
filter:alpha(opacity=80);opacity:0.8; 
float:left;cursor:default; font-size:12px;line-height:20px; 
margin:0px 5px; font-family:Arial; 
} 
.tab_btn_num li.hot{ 
background:#FFCC00; color:#993300; 
border:2px solid #FF0000; 
} 
.shell{ 
width:99999px; height:100%; 
} 
.shell li{ 
float:left; 
width:360px; height:100%; 
} 

.main{ 
width:360px;height:190px; 
overflow:hidden; 
margin:10px auto; 
text-align:left;font-size:12px; 
} 

</style> 
</head> 

<body> 
<div class="dhooo_tab"> 
<ul class="tab_btn" id="myTab_btns1"> 
<li class="hot">嘉年华</li><li>完美冬日</li><li>年终庆</li><li>妈咪宝贝</li><li>冬季氛围</li> 
</ul> 
<div class="main" id="main1"> 
<div class="shell"> 
<ul id="content1"> 
<li><img src="images/1.jpg" /></li> 
<li><img src="images/2.jpg" /></li> 
<li><img src="images/3.jpg" /></li> 
<li><img src="images/4.jpg" /></li> 
<li><img src="images/5.jpg" /></li> 
</ul> 
</div> 
</div> 
</div> 
<div class="dhooo_tab"> 
<div style="height:30px;background:#CC0000;margin-bottom:10px;border-bottom:2px solid #990000;position:relative"><div style="background:#fff;width:80px;font-size:12px;position:absolute;bottom:-2px;left:20px;padding:5px">我的幻灯片</div></div> 
<ul class="tab_btn_num" id="myTab_btns2"> 
<li class="hot">1</li><li>2</li><li>3</li><li>4</li><li>5</li> 
</ul> 
<div class="main" id="main2"> 
<ul class="content"> 
<li><img src="images/5.jpg" /></li><li><img src="images/4.jpg" /></li><li><img src="images/3.jpg" /></li><li><img src="images/2.jpg" /></li><li><img src="images/1.jpg" /></li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
var Ex=function (o){for(var k in o)this[k]=o[k];return this} 
var UI=function (id){return document.getElementById(id)} 
var UIs=function (tag){return Ex.call([],this.getElementsByTagName(tag))} 
var Each=function (a,fn){for(var i=0;i<a.length;i++)fn.call(a[i],i,a)} 
var dhooo=function (ini){ 
this.bind(ini,this); 
this.autoIndex=0; 
}; 
Ex.call(dhooo.prototype,{ 
bind:function (ini,me){ 
var dir=ini.dir==&#39;top&#39;?&#39;scrollTop&#39;:&#39;scrollLeft&#39;,pan=UI(ini.contentID); 
var start=function (o){ 
Each(ini.btns,function(){this.className=&#39;&#39;}); 
o.className=ini.className; 
me.autoIndex=o.index; 
me.begin(o.index,pan,ini.len,dir); 
}; 
pan.onmouseover=function (){me.stop=true}; 
Each(ini.btns,function (i){ 
this.index=i; 
this.onmouseover=function (){me.stop=true;start(this)}; 
pan.onmouseout=this.onmouseout=function(){me.stop=false} 
}); 
var auto=function(){ 
if(!me.stop){ 
me.autoIndex=me.autoIndex==4?0:++me.autoIndex; 
start(ini.btns[me.autoIndex]); 
} 
}; 
if(ini.auto)this.autoPlay=window.setInterval(auto,1000); 
} 
,begin:function (i,o,len,dir){ 
(function (me){ 
clearInterval(me.only); 
me.only=setInterval(function (){ 
var diff=(i*len-o[dir])*0.1; 
o[dir]+=Math[diff>0?&#39;ceil&#39;:&#39;floor&#39;](diff); 
if(diff==0)clearInterval(me.only); 
},10) 
})(this) 
} 
}) 

new dhooo({ 
btns:UIs.call(UI(&#39;myTab_btns1&#39;),&#39;LI&#39;) 
,className:&#39;hot&#39; 
,contentID:&#39;main1&#39; 
,len:360 
}); 

new dhooo({ 
btns:UIs.call(UI(&#39;myTab_btns2&#39;),&#39;LI&#39;) 
,className:&#39;hot&#39; 
,contentID:&#39;main2&#39; 
,len:190 
,dir:&#39;top&#39; 
,auto:true 
}); 

</script> 
</body> 
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Comprehensive JS checkbox for selecting all, deselecting all, and deleting function codes_javascript skillsNext article：Comprehensive JS checkbox for selecting all, deselecting all, and deleting function codes_javascript skills

See more

Beautiful js tab image rotation effect code (customizable slideshow and image buffer switching)_advertising code

Related articles