Heim > Artikel > Web-Frontend > 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)_广告代码

漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)_广告代码

PHP中文网Original: 2016-05-16 18:57:421004Durchsuche

偶然浏览网上发现一款非常漂亮的幻灯片效果代码，特给大家整理了下，非常漂亮的tab 幻灯片效果代码，里面是js类实现的，可以修改

<!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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：比较全的JS checkbox全选、取消全选、删除功能代码_javascript技巧Nächster Artikel：JavaScript 图片切割效果(放大镜)

In Verbindung stehende Artikel

Mehr sehen