一款基于jQuery底部带缩略图的焦点图

之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩...

之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果。

在线预览   源码下载

实现的代码。

html代码:

  1. <div class="picbox">
  2.         <div id="featured">
  3.             <div class="image" id="image_pic-01">
  4.                 <img src="images/001.jpg">
  5.                 <div class="word">
  6.                     <h3>
  7.                         标题一</h3>
  8.                     <p>
  9.                         内容介绍</p>
  10.                 </div>
  11.             </div>
  12.             <div class="image" id="image_pic-02">
  13.                 <img class="full" src="images/002.jpg">
  14.                 <div class="word">
  15.                     <h3>
  16.                         标题二</h3>
  17.                     <p>
  18.                         内容介绍</p>
  19.                 </div>
  20.             </div>
  21.             <div class="image" id="image_pic-03">
  22.                 <img class="full" src="images/003.jpg">
  23.                 <div class="word">
  24.                     <h3>
  25.                         标题三</h3>
  26.                     <p>
  27.                         内容介绍</p>
  28.                 </div>
  29.             </div>
  30.             <div class="image" id="image_pic-04">
  31.                 <img class="full" src="images/004.jpg">
  32.                 <div class="word">
  33.                     <h3>
  34.                         标题四</h3>
  35.                     <p>
  36.                         内容介绍</p>
  37.                 </div>
  38.             </div>
  39.             <div class="image" id="image_pic-05">
  40.                 <img class="full" src="images/005.jpg">
  41.                 <div class="word">
  42.                     <h3>
  43.                         标题五</h3>
  44.                     <p>
  45.                         内容介绍</p>
  46.                 </div>
  47.             </div>
  48.             <div class="image" id="image_pic-06">
  49.                 <img class="full" src="images/006.jpg">
  50.                 <div class="word">
  51.                     <h3>
  52.                         标题六</h3>
  53.                     <p>
  54.                         内容介绍</p>
  55.                 </div>
  56.             </div>
  57.             <div class="image" id="image_pic-07">
  58.                 <img class="full" src="images/007.jpg">
  59.                 <div class="word">
  60.                     <h3>
  61.                         标题七</h3>
  62.                     <p>
  63.                         内容介绍</p>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <div id="thumbs">
  68.             <ul>
  69.                 <li class="first btnPrev">
  70.                     <img id="play_prev" src="images/btn_prev.gif"></li>
  71.                 <li class="slideshowItem"><a id="thumb_pic-01" href="javascript:" class="current">
  72.                     <img src="images/001_1.jpg"></a></li>
  73.                 <li class="slideshowItem"><a id="thumb_pic-02" href="javascript:">
  74.                     <img src="images/002_1.jpg" width="78" height="37"></a></li>
  75.                 <li class="slideshowItem"><a id="thumb_pic-03" href="javascript:">
  76.                     <img src="images/003_1.jpg" width="78" height="37"></a></li>
  77.                 <li class="slideshowItem"><a id="thumb_pic-04" href="javascript:">
  78.                     <img src="images/004_1.jpg" width="78" height="37"></a></li>
  79.                 <li class="slideshowItem"><a id="thumb_pic-05" href="javascript:">
  80.                     <img src="images/005_1.jpg" width="78" height="37"></a></li>
  81.                 <li class="slideshowItem"><a id="thumb_pic-06" href="javascript:">
  82.                     <img src="images/006_1.jpg" width="78" height="37"></a></li>
  83.                 <li class="slideshowItem"><a id="thumb_pic-07" href="javascript:">
  84.                     <img src="images/007_1.jpg" width="78" height="37"></a></li>
  85.                 <li class="last btnNext">
  86.                     <img id="play_next" src="images/btn_next.gif"></li>
  87.             </ul>
  88.             <div class="clear">
  89.             </div>
  90.         </div>
  91.     </div>
复制代码via:http://www.w2bc.com/Article/15948
标签: 缩略图jquerypic