jQuery幻灯片导航预览缩略图插件

这个插件是幻灯片或轮播图导航的一个辅助插件，它能够在导航圆点按钮上生成精美的缩略图。

HTML

<ul class="ts_container">
  <li><a href="#">Image 1</a></li>
  <li><a href="#">Image 2</a></li>
  <li><a href="#">Image 3</a></li>
  <li><a href="#">Image 4</a></li>
  <li><a href="#">Image 5</a></li>
  <li><a href="#">Image 6</a></li>
  <li><a href="#">Image 7</a></li>
  <li><a href="#">Image 8</a></li>
  <li><a href="#">Image 9</a></li>
  <li><a href="#">Image 10</a></li>
  <li class="ts_thumbnails">
    <div class="ts_preview_wrapper">
      <!-- List with thumbnails/preview items -->
    </div>
    <span></span>
  </li>
</ul>
                

空的span是用来放圆点导航按钮的。

缩略图放在ts_preview_wrapper div中，它的结构如下：

<ul class="ts_preview">
  <li><img src="images/thumbs1/1.jpg" alt="Thumb 1" /></li>
  <li><img src="images/thumbs1/2.jpg" alt="Thumb 2" /></li>
  <li><img src="images/thumbs1/3.jpg" alt="Thumb 3" /></li>
  <li><img src="images/thumbs1/4.jpg" alt="Thumb 4" /></li>
  <li><img src="images/thumbs1/5.jpg" alt="Thumb 5" /></li>
  <li><img src="images/thumbs1/6.jpg" alt="Thumb 6" /></li>
  <li><img src="images/thumbs1/7.jpg" alt="Thumb 7" /></li>
  <li><img src="images/thumbs1/8.jpg" alt="Thumb 8" /></li>
  <li><img src="images/thumbs1/9.jpg" alt="Thumb 9" /></li>
  <li><img src="images/thumbs1/10.jpg" alt="Thumb 10" /></li>
</ul>
                

JAVASCRIPT

整个插件的js框架如下：

(function($) {
  $.fn.thumbnailSlider = function(options) {
    var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
    return this.each(function() {
      ...
    });
  };
  $.fn.thumbnailSlider.defaults = {
    speed   : 100, //speed of each slide animation
    easing    : 'jswing', //easing effect for the slide animation
    thumb_width : 75, //your photos width
    thumb_height: 75, //your photos height
    zoom    : false, //zoom animation for the thumbs
    zoomratio : 1.3, //multiplicator for zoom (must be > 1)
    zoomspeed : 15000, //speed of zoom animation
    onClick   : function(){return false;} //click callback
  };
})(jQuery);
                

在这个demo中有4种效果，下面是最后一种效果的调用方法：

$('#demo4').thumbnailSlider({
  thumb_width : 174,
  thumb_height: 260,
  speed   : 200,
  zoom    : true,
  zoomspeed : 10000,
  zoomratio : 1.7
});