(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 當(dāng)鼠標(biāo)經(jīng)過導(dǎo)航的時候它將會被設(shè)定并且默認(rèn)的值將會賦給導(dǎo)航的第一個預(yù)覽點*/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的寬度->縮略圖的寬度乘以所有縮略圖的數(shù)量*/$ts_preview.css('width' , total_elems*o.thumb_width + 'px');/*設(shè)定 $ts_preview_wrapper 的寬度和高度 -> thumb width / thumb height*/$ts_preview_wrapper.css({width: o.thumb_width + 'px',height: o.thumb_height + 'px'});//鼠標(biāo)經(jīng)過導(dǎo)航的元素$nav_elems.bind('mouseenter',function(){var $nav_elem= $(this),idx= $nav_elem.index();/*計算出 $ts_thumbnails 最新的左側(cè)距離*/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 的左側(cè)過渡到右邊的縮略圖*/$ts_preview.stop(true).animate({left: -idx*o.thumb_width + 'px'},o.speed,o.easing);//當(dāng)鼠標(biāo)停留的時候圖片進(jìn)行放大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(){//如果放大了設(shè)置它的寬度和高度為默認(rèn)值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,// 放大比率（數(shù)值必須大于1）zoomspeed: 15000,//放大動畫的速度onClick: function(){return false;}//點擊回發(fā)};})(jQuery);