本文實例講述了js圖片輪播特效，分享給大家供大家參考。具體如下：
這是一款基于javascript實現的圖片輪播特效代碼，有縮略圖和標題，可以自定義標題。
運行效果圖： -------------------查看效果-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的js圖片輪播特效代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js圖片輪播特效</title><link rel="stylesheet" type="text/css" href="common.css" /><link href="zixun.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="jquery-1.5.min.js"></script><!--焦點圖 js--><script src="zhanlan_qh.js" type="text/javascript"></script></head><body><style>ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}ul#bcty365_nav li{float:left; display:inline; margin:10px;}ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微軟雅黑";}ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}</style> <!--焦點圖--> <div class="newtu"> <div id="inner3"> <div class="hot-event3"> <div class="switch-nav3"> <a href="#" onclick="return false;" class="prev"> <i class="ico i-prev"></i> </a> <a href="#" onclick="return false;" class="next"> <i class="ico i-next"></i> </a> </div> <div class="event-item3" style="display: block;"> <a target="_blank" href="#" class="banner"> <img src="img_01.jpg"/> </a> <p></p> <h2><a target="_blank" href="#">盛華厚：得天獨"厚"的多面</a></h2> </div> <div class="event-item3" style="display: none;"> <a target="_blank" href="#" class="banner"> <img src="img_02.jpg" /> </a> <p></p> <h2><a target="_blank" href="#">2盛華厚：得天獨"厚"的多面</a></h2> </div> <div class="event-item3" style="display: none;"> <a target="_blank" href="#" class="banner"> <img src="img_03.jpg" /> </a> <p></p> <h2><a target="_blank" href="#">3盛華厚：得天獨"厚"的多面</a></h2> </div> <div class="event-item3" style="display: block;"> <a target="_blank" href="#" class="banner"> <img src="img_01.jpg"/> </a> <p></p> <h2><a target="_blank" href="#">盛華厚：得天獨"厚"的多面</a></h2> </div> <div class="switch-tab3"> <a href="#" onclick="return false;" class="current3"><img src="img_01.jpg"/></a><a href="#" onclick="return false;"><img src="img_02.jpg"/></a><a href="#" onclick="return false;"><img src="img_03.jpg"/></a><a href="#" onclick="return false;"><img src="img_01.jpg"/></a> </div> </div> <script type="text/javascript"> $('#inner3').nav3({ t: 4000, a: 1000 });//參數t:是間隔輪換時間，參數a:是輪換所需要時間 </script> </div> </div> </body></html>以上就是為大家分享的javascript圖片輪播特效代碼，希望大家可以喜歡，并應用到實踐中。
新聞熱點
疑難解答
