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

更新时间：2008年12月12日 23:49:19 作者：

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

在线演示 http://img.jb51.net/online/tab08/index.htm

<!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=='top'?'scrollTop':'scrollLeft',pan=UI(ini.contentID); var start=function (o){ Each(ini.btns,function(){this.className=''}); 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?'ceil':'floor'](diff); if(diff==0)clearInterval(me.only); },10) })(this) } }) new dhooo({ btns:UIs.call(UI('myTab_btns1'),'LI') ,className:'hot' ,contentID:'main1' ,len:360 }); new dhooo({ btns:UIs.call(UI('myTab_btns2'),'LI') ,className:'hot' ,contentID:'main2' ,len:190 ,dir:'top' ,auto:true }); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

弹出广告特效代码(一个IP只弹出一次)
弹出广告特效代码(一个IP只弹出一次)...
2007-05-05
点击文章内容处弹出页面代码
当阅读者点击文章内容处，即可弹出一个页面。具体的作用可以比弹出更好。
2009-10-10
提示广告代码
[蓝色]提示广告代码...
2006-11-11
左右两侧的广告代码简单
左右两侧的广告代码简单...
2006-06-06
javascript实现的多条新闻公告系统
javascript实现的多条新闻公告系统...
2007-08-08
右下角弹出信息（自动关闭）
代码精简的右下角弹出信息广告代码
2008-12-12
可关闭与最小化的右下角浮动广告代码
可关闭或最小化的右下角浮动广告，非常实用啊，现在右下角广告还是比较多的，而且广告效果也还可以，除了用作广告，我们还可将右下角定义为网站广告显示、用户提醒等功能。
2010-09-09
网页中移动的广告效果鼠标悬停
网页中移动的广告效果鼠标悬停...
2006-08-08
从sohu弄下来的flash中展示图片的代码
从sohu弄下来的flash中展示图片的代码...
2007-04-04
点击下载链接弹出页面实现代码
点击下载地址链接弹出页面实现代码，可以用来弹出广告商的广告。
2009-10-10