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

站长资源 2024/11/20 佚名

68 1538 68

相思资源网 Design By www.200059.com

在线演示 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,幻灯片

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

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

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

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

js,tab,幻灯片

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

兼容ie和firefox js关闭代码

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

友情链接

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

js,tab,幻灯片

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

兼容ie和firefox js关闭代码

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

友情链接

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