js圖片輪播特效代碼分享

更新時(shí)間：2015年09月07日 16:45:27 投稿：lijiao

這篇文章主要介紹了js圖片輪播特效，圖片切換效果特別適合做產(chǎn)品演示，感興趣的小伙伴可以參考下

本文實(shí)例講述了js圖片輪播特效，分享給大家供大家參考。具體如下：
這是一款基于javascript實(shí)現(xiàn)的圖片輪播特效代碼，有縮略圖和標(biāo)題，可以自定義標(biāo)題。
運(yùn)行效果圖： -------------------查看效果-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的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>

<!--焦點(diǎn)圖 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> 


<!--焦點(diǎn)圖-->
 <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="#">盛華厚：得天獨(dú)"厚"的多面</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盛華厚：得天獨(dú)"厚"的多面</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盛華厚：得天獨(dú)"厚"的多面</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="#">盛華厚：得天獨(dú)"厚"的多面</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 });//參數(shù)t:是間隔輪換時(shí)間，參數(shù)a:是輪換所需要時(shí)間
  </script>
 </div>
  </div>
 

</body>
</html>

以上就是為大家分享的javascript圖片輪播特效代碼，希望大家可以喜歡，并應(yīng)用到實(shí)踐中。

您可能感興趣的文章: