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

Kalika ·

更新时间:2024-09-21

· 640 次阅读

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

<b> 
<b> 
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; 
} 
</b> 
嘉年华完美冬日年终庆妈咪宝贝冬季氛围 
<img class="alignnone size-full wp-image-100868" src="/upload/wp-content/uploads/2020/01/h4ve3wmlnzv.jpg" width="360" height="190" /> 
<img class="alignnone size-full wp-image-100869" src="/upload/wp-content/uploads/2020/01/if1ygazo2ff.jpg" width="360" height="190" /> 
<img class="alignnone size-full wp-image-100870" src="/upload/wp-content/uploads/2020/01/nu34bkrm4fv.jpg" width="360" height="190" /> 
<img class="alignnone size-full wp-image-100871" src="/upload/wp-content/uploads/2020/01/kpglbfzryap.jpg" width="360" height="190" /> 
<img class="alignnone size-full wp-image-100872" src="/upload/wp-content/uploads/2020/01/kfwwlji52nk.jpg" width="360" height="190" /> 
我的幻灯片 
12345 
<img class="alignnone size-full wp-image-100872" src="/upload/wp-content/uploads/2020/01/kfwwlji52nk.jpg" width="360" height="190" /><img class="alignnone size-full wp-image-100871" src="/upload/wp-content/uploads/2020/01/kpglbfzryap.jpg" width="360" height="190" /><img class="alignnone size-full wp-image-100870" src="/upload/wp-content/uploads/2020/01/nu34bkrm4fv.jpg" width="360" height="190" /><img class="alignnone size-full wp-image-100869" src="/upload/wp-content/uploads/2020/01/if1ygazo2ff.jpg" width="360" height="190" /><img class="alignnone size-full wp-image-100868" src="/upload/wp-content/uploads/2020/01/h4ve3wmlnzv.jpg" width="360" height="190" /> 
</b>

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

自定义缓冲 tab 幻灯片 js

1024 个赞