This example describes the thumbnail preview slider for jquery implementations. Share to everyone for your reference. Specifically as follows:
The effect is as shown in the following illustration:
The main code is as follows:
(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 '); /* Calculate the size of the $ts_thumbnails: Width-> width thumbnail + border (2*5) height-> height thumbnail + border + triangle Hei Ght (6) top->-(height plus margin of 5) left-> Leftdot-0.5*width + 0.5*widthnavdot When the mouse is navigated it will be set and the default value will be assigned to the navigation A preview point * * var w_ts_thumbnails= o.thumb_width + 2*5, h_ts_thumbnails= o.thumb_height + 2*5 + 6, t_ts_thumbnails=-(H_ts_thum Bnails + 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_t
S_thumbnails + ' px '}); /* Calculates the position above and to the left of the tip arrows top-> thumb height + border (2*5) left-> (thumb width + border)/2-width/2/var t_arrow= o.thum
B_height + 2*5, l_arrow= (o.thumb_width + 2*5)/2-$arrow. Width ()/2;
$arrow. css ({left:l_arrow + ' px ', Top:t_arrow + ' px '});
/* Calculates the width of the $ts_preview-> thumbnail multiplied by the number of all thumbnails * * * $ts _preview.css (' width ', total_elems*o.thumb_width + ' px '); /* Set $ts _preview_wrapper width and height-> thumb width/thumb height/$ts _preview_wrapper.css ({width:o.thumb_width + ' px ')
, Height:o.thumb_height + ' px '}); The mouse-navigated element $nav _elems.bind (' MouseEnter ', function () {var $nav _elem= $ (this), idx= $nav _elem.index (), and/or calculated $ts _
Thumbnails the latest left distance/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);
/* Animation transitions from the left side of the $ts _preview to the right thumbnail/$ts _preview.stop (True). Animate ({left:-idx*o.thumb_width + ' px '},o.speed,o.easing); When the mouse pauses the picture is magnified if (o.zoom && o.zoomratio > 1) {var new_width= o.zoomratio * o.thumb_width, new_height= o.zoom
Ratio * O.THUMB_HEIGHT;
Increase the width of the $ts _preview in order to allow the picture to magnify the 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 magnified set its width and height to be the default value 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,//Slide transition animation speed easing: ' jswing ',//Easing animation effect thumb_width:75,//your picture width thumb_ height:75,//your picture height zoom:false,//whether the thumbnail magnifies the zoomratio:1.3,//magnification ratio (the value must be greater than 1) zoomspeed:15000,//enlarge the animation speed onclick:function () {return false;}
Click Send back};
}) (JQuery);
Full instance code click here to download the site.
I hope this article will help you with your jquery programming.