(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 
當鼠標經(jīng)過導航的時候它將會被設定并且默認的值將會賦給導航的第一個預覽點
*/
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');
/*
設定 $ts_preview_wrapper 的寬度和高度 -> thumb width / thumb height
*/
$ts_preview_wrapper.css({
width: o.thumb_width + 'px',
height: o.thumb_height + 'px'
});
//鼠標經(jīng)過導航的元素
$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);
//當鼠標停留的時候圖片進行放大
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,// 放大比率（數(shù)值必須大于1）
zoomspeed: 15000,//放大動畫的速度
onClick: function(){return false;}//點擊回發(fā)
};
})(jQuery);