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

网络编程 2024/10/14 佚名

3 2 1

在线演示 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>  <ul class="tab_btn" id="myTab_btns1"> <li>嘉年华</li><li>完美冬日</li><li>年终庆</li><li>妈咪宝贝</li><li>冬季氛围</li> </ul>   <ul id="content1"> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/1.jpg');"><img src="/UploadFiles/2021-04-02/1.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2.jpg');"><img src="/UploadFiles/2021-04-02/2.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/3.jpg');"><img src="/UploadFiles/2021-04-02/3.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/4.jpg');"><img src="/UploadFiles/2021-04-02/4.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/5.jpg');"><img src="/UploadFiles/2021-04-02/5.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> </ul>     我的幻灯片 <ul class="tab_btn_num" id="myTab_btns2"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ul>  <ul class="content"> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/5.jpg');"><img src="/UploadFiles/2021-04-02/5.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li><li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/4.jpg');"><img src="/UploadFiles/2021-04-02/4.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li><li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/3.jpg');"><img src="/UploadFiles/2021-04-02/3.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li><li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2.jpg');"><img src="/UploadFiles/2021-04-02/2.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li><li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/1.jpg');"><img src="/UploadFiles/2021-04-02/1.jpg" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> </ul>    </body> </html>

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

js,tab,幻灯片

标签：

js,tab,幻灯片

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

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

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

暂无“漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

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

js,tab,幻灯片

鼠标滑过放大显示效果的列表

兼容ie和firefox js关闭代码

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

友情链接

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

js,tab,幻灯片

鼠标滑过 放大显示效果的列表

兼容ie和firefox js关闭代码

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

友情链接

鼠标滑过放大显示效果的列表