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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery幻灯片导航预览缩略图插件
jQuery幻灯片导航预览缩略图插件
分享:

    插件介绍

    这是一款在幻灯片导航按钮上生成预览缩略图的jQuery插件。有4种预览缩略图效果:图片滑动、图片放大、小缩略图和大缩略图效果。

    浏览器兼容性

    浏览器兼容性
    时间:11-15
    阅读:

简要教程

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

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
});