这个插件是幻灯片或轮播图导航的一个辅助插件,它能够在导航圆点按钮上生成精美的缩略图。
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 });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!