js帶縮略圖的圖片輪播效果代碼分享

更新時間：2015年09月14日 15:52:01 投稿：lijiao

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

本文實例講述了js帶縮略圖的圖片輪播效果。分享給大家供大家參考。具體如下：
這是一款基于javaScript實現(xiàn)帶縮略圖的圖片輪播特效代碼，實現(xiàn)過程很簡單。
運行效果圖：-------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
在head區(qū)域引入CSS樣式：

<link href="css/jb51.net.css" rel="stylesheet" type="text/css" >

為大家分享的JS帶縮略圖的5屏輪換焦點圖特效代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS帶縮略圖的5屏輪換焦點圖</title>
<link href="css/jb51.net.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="js/show.js"></script>
</head>

<body>
<div id="p7ssm">
   <div id="p7ssm_cf">&nbsp;</div>
   <div id="p7ssm_loading"><img src="images/loading.gif" alt="" width="78" height="8" /></div>
   <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image">
    <tr>
     <td><div id="p7ssm_fullsize">
       <div id="p7ssm_fsc">
        <div id="p7ssm_fsw">
         <div id="p7ssm_fsimg"><a href="javascript:;" id="p7ssm_fslink"><img src="images/biaozhi.gif" alt="" name="p7ssm_im" width="390" height="245" border="0" id="p7ssm_im" /></a></div>
         <div id="p7ssm_description"></div>
        </div>
       </div>
      </div></td>
    </tr>
   </table>
   <div id="p7SSMwhmb">
    <div id="p7ssm_thumbs">
     <div id="p7SSMwp_1">
      <div class="p7ssm_thumb_section">
       <ul><!-- 修改內(nèi)容開始 -->
        <li><a href="images/001.jpg">
  <img src="images/001.jpg" alt="《福娃奧運漫游記》獲動漫大賽最佳作品獎" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="http://chabaoo.cn/">點擊查看詳情</a></div>
         <div class="p7ssm_fd">《福娃奧運漫游記》獲動漫大賽最佳作品獎</div>
        </li>
        <li><a href="images/002.jpg">
  <img src="images/002.jpg" alt="超級插畫設(shè)計 3D機器人與平面相結(jié)合" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="http://chabaoo.cn/">點擊查看詳情</a></div>
         <div class="p7ssm_fd">超級插畫設(shè)計 3D機器人與平面相結(jié)合</div>
        </li>
        <li><a href="images/003.jpg">
  <img src="images/003.jpg" alt="潔凈舒適的XP桌面壁紙 輕松愉快的環(huán)境" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="http://chabaoo.cn/">點擊查看詳情</a></div>
         <div class="p7ssm_fd">潔凈舒適的XP桌面壁紙 輕松愉快的環(huán)境</div>
        </li>
        <li><a href="images/004.jpg">
  <img src="images/004.jpg" alt="室內(nèi)裝修三維設(shè)計 創(chuàng)造簡潔舒適" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="http://chabaoo.cn/">點擊查看詳情</a></div>
         <div class="p7ssm_fd">室內(nèi)裝修三維設(shè)計 創(chuàng)造簡潔舒適</div>
        </li>
        <li><a href="images/005.jpg">
  <img src="images/005.jpg" alt="世界上令人嘆為觀止的仿真的機器人" width="390" height="245" /></a>
         <div class="p7ssm_lk"><a href="http://chabaoo.cn/">點擊查看詳情</a></div>
         <div class="p7ssm_fd">世界上令人嘆為觀止的仿真的機器人</div>
        </li>
       <!-- 修改內(nèi)容結(jié)束 --></ul>
       <br class="p7ssm_clearThumbs" />
      </div>
     </div>
    </div>
   </div>
   <div id="p7ssm_toolbar">
    <div class="p7ssm_sectionTrigger"><a id="p7SSMtp_1" href="#">New Image Set</a></div>
    <div id="p7ssm_dragbar" title="Move"><span>Move</span></div>
    <div id="p7ssm_preview">  
     <table summary="Thumbnail Preview">
      <tr>
       <td><img src="images/biaozhi.gif" alt="" /></td>
      </tr>
     </table>
    </div>
    <div id="p7ssm_tools">
     <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar">
      <tr>
       <td><div id="p7ssm_nav_wrapper"><a id="p7SSMtnav" href="#" title="Menu"><em>Navigate</em></a>
         <div id="p7SSMwnav">
          <div id="p7ssm_navList">
           <ul>
            <li></li>
           </ul>
          </div>
         </div>
        </div></td>
       <td><a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb"><em>Hide Thumbs</em></a></td>
       <td><a href="#" id="p7ssm_first" title="First Image"><em>First</em></a></td>
       <td><a href="#" id="p7ssm_prev" title="Previous Image"><em>Previous</em></a></td>
       <td><a href="#" id="p7ssm_pp" class="p7ssm_pause" title="Pause"><em>Pause</em></a></td>
       <td><a href="#" id="p7ssm_next" title="Next Image"><em>Next</em></a></td>
       <td><a href="#" id="p7ssm_last" title="Last Image"><em>Last</em></a></td>
       <td><div id="p7ssm_slidechannel">
         <div id="p7ssm_slider"><a href="#" id="p7ssm_slidebar" title="Speed:"><em>Set Speed</em></a></div>
                 </div></td>
        </tr>
     </table>
    </div>
   </div>
<!--[if IE 7]>
<style>
#p7ssm, #p7ssm div {zoom: 1;}
</style><![endif]-->
<!--[if IE 6]><style>
#p7ssm a, #p7ssm, #p7ssm div, #p7ssm_thumb_wrapper {zoom: 1;}
.p7ssm_thumb_section {padding-right: 0; padding-left: 0;}
.p7ssm_thumb_section a {float: left;}
</style><![endif]-->
<!--[if IE 5]><style>
#p7ssm {}
.p7ssm_sectionTrigger {text-align: left;}
#p7ssm_navList li {float: left; clear:both; width: 100%;}
#p7ssm, #p7ssm_w1, #p7ssm_w2, #p7ssm_description, #p7ssm_preview,
#p7ssm_navList a, .p7ssm_sectionTrigger a, #p7ssm_thumbs,
.p7ssm_thumb_section, #p7ssm_fsw {height: 1%;}
.p7ssm_thumb_section {padding: 0;}
</style><![endif]-->
<!--[if IE 5.5000]><style>
#p7ssm, #p7ssm_w1, #p7ssm_w2 {zoom: 1;}
</style><![endif]-->
<script type="text/javascript">
<!--
P7_SSMinit(1,1,1,1,0,1,1,1,5);
//-->
</script>
</div>

<br><br>
<div align="center">
 <p align="center"></p>
 <p align="center"></p>
 <p>&nbsp;</p>
</div>
</body>
</html>

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

您可能感興趣的文章: