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

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






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;
}







嘉年华完美冬日年终庆妈咪宝贝冬季氛围
























我的幻灯片

12345


















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;i0?'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
});



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]