(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');
/* 
計(jì)算出$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)過(guò)導(dǎo)航的時(shí)候它將會(huì)被設(shè)定并且默認(rèn)的值將會(huì)賦給導(dǎo)航的第一個(gè)預(yù)覽點(diǎn)
*/
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'
});
/*
計(jì)算出提示箭頭的上方和左邊的位置
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'
});
/*
計(jì)算出$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)過(guò)導(dǎo)航的元素
$nav_elems.bind('mouseenter',function(){
var $nav_elem= $(this),
idx= $nav_elem.index();
/*
計(jì)算出 $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); 
/*
動(dòng)畫從 $ts_preview 的左側(cè)過(guò)渡到右邊的縮略圖
*/
$ts_preview.stop(true)
.animate({
left: -idx*o.thumb_width + 'px'
},o.speed,o.easing);
//當(dāng)鼠標(biāo)停留的時(shí)候圖片進(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,// 幻燈片過(guò)渡的動(dòng)畫速度
easing: 'jswing',// easing動(dòng)畫效果
thumb_width: 75,//您的圖片寬度
thumb_height: 75,//您的圖片高度
zoom: false,//縮略圖是否放大
zoomratio: 1.3,// 放大比率（數(shù)值必須大于1）
zoomspeed: 15000,//放大動(dòng)畫的速度
onClick: function(){return false;}//點(diǎn)擊回發(fā)
};
})(jQuery);