(function($) {$.fn.thumbnailSlider = function(options) {var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);return this.each(function() {var $this = $(this),o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;var $ts_container= $this.children('.ts_container'),$ts_thumbnails= $ts_container.children('.ts_thumbnails'),$nav_elems= $ts_container.children('li').not($ts_thumbnails),total_elems= $nav_elems.length,$ts_preview_wrapper= $ts_thumbnails.children('.ts_preview_wrapper'),$arrow= $ts_thumbnails.children('span'),$ts_preview= $ts_preview_wrapper.children('.ts_preview');/* 計算出$ts_thumbnails的尺寸：width -> width thumbnail + border (2*5)height -> height thumbnail + border + triangle height(6)top-> -(height plus margin of 5)left-> leftDot - 0.5*width + 0.5*widthNavDot 當鼠標經過導航的時候它將會被設定并且默認的值將會賦給導航的第一個預覽點*/var w_ts_thumbnails= o.thumb_width + 2*5,h_ts_thumbnails= o.thumb_height + 2*5 + 6,t_ts_thumbnails= -(h_ts_thumbnails + 5),$first_nav= $nav_elems.eq(0),l_ts_thumbnails= $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();$ts_thumbnails.css({width: w_ts_thumbnails + 'px',height: h_ts_thumbnails + 'px',top: t_ts_thumbnails + 'px',left: l_ts_thumbnails + 'px'});/*計算出提示箭頭的上方和左邊的位置top-> thumb height + border(2*5)left-> (thumb width + border)/2 -width/2*/var t_arrow= o.thumb_height + 2*5,l_arrow= (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;$arrow.css({left: l_arrow + 'px',top: t_arrow + 'px'});/*計算出$ts_preview的寬度->縮略圖的寬度乘以所有縮略圖的數量*/$ts_preview.css('width' , total_elems*o.thumb_width + 'px');/*設定 $ts_preview_wrapper 的寬度和高度 -> thumb width / thumb height*/$ts_preview_wrapper.css({width: o.thumb_width + 'px',height: o.thumb_height + 'px'});//鼠標經過導航的元素$nav_elems.bind('mouseenter',function(){var $nav_elem= $(this),idx= $nav_elem.index();/*計算出 $ts_thumbnails 最新的左側距離*/var new_left= $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();$ts_thumbnails.stop(true).show().animate({left: new_left + 'px'},o.speed,o.easing); /*動畫從 $ts_preview 的左側過渡到右邊的縮略圖*/$ts_preview.stop(true).animate({left: -idx*o.thumb_width + 'px'},o.speed,o.easing);//當鼠標停留的時候圖片進行放大if(o.zoom && o.zoomratio > 1){var new_width= o.zoomratio * o.thumb_width,new_height= o.zoomratio * o.thumb_height;//增加 $ts_preview 的寬度為了能夠讓圖片放大var ts_preview_w= $ts_preview.width();$ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width) + 'px');$ts_preview.children().eq(idx).find('img').stop().animate({width: new_width + 'px',height: new_height + 'px'},o.zoomspeed);}}).bind('mouseleave',function(){//如果放大了設置它的寬度和高度為默認值if(o.zoom && o.zoomratio > 1){var $nav_elem= $(this),idx= $nav_elem.index();$ts_preview.children().eq(idx).find('img').stop().css({width: o.thumb_width + 'px',height: o.thumb_height + 'px'});}$ts_thumbnails.stop(true).hide();}).bind('click',function(){var $nav_elem= $(this),idx= $nav_elem.index();o.onClick(idx);});});};$.fn.thumbnailSlider.defaults = {speed: 100,// 幻燈片過渡的動畫速度easing: 'jswing',// easing動畫效果thumb_width: 75,//您的圖片寬度thumb_height: 75,//您的圖片高度zoom: false,//縮略圖是否放大zoomratio: 1.3,// 放大比率（數值必須大于1）zoomspeed: 15000,//放大動畫的速度onClick: function(){return false;}//點擊回發};})(jQuery);