jquery实现的缩略图预览滑块实例

本文实例讲述了jquery实现的缩略图预览滑块。分享给大家供大家参考。具体如下：

运行效果如下图所示：

主要代码如下：

（函数($) {$.fn.thumbnailSlider=函数（选项){var opts=$ .extend({}，$.fn.thumbnailSlider.defaults，options)；返回这个。每个(函数(){ var $ this=$(this)，o=$ .梅塔。$.extend({}，opts，$ pxs _ container。data()): opts；var $ ts _ container=$ this。儿童.ts_container ')，$ ts _ thumbnals=$ ts _ container。儿童.ts _缩略图)，$ nav _ elems=$ ts _ container。孩子们(李).not($ ts _ thumbnals)，total_elems=$nav_elems.length，$ ts _ preview _ wrapper=$ ts _ thumbnals。儿童.ts_preview_wrapper ')，$ arrow=$ ts _ thumbnals。子代(' span ')，$ ts _ preview=$ ts _ preview _ wrapper。儿童.ts _ preview’)；/* 计算出$ ts _缩略图的尺寸：宽度-宽度缩略图边框(2*5)高度-高度缩略图边框三角形高度(6)顶部-(高度加上5的边距)左侧-左点-0.5 *宽度0.5 *宽度圆点当鼠标经过导航的时候它将会被设定并且默认的值将会赋给导航的第一个预览点*/var w _ ts _ thumb=o . thumb _ width 2 * 5，h _ ts _ thumb=o . thumb _ height 2 * 5 6，t _ ts _ thumb=-(h _ ts _ thumb 5)，$first_nav=$nav_elems.eq(0)，l _ ts _ thumb=$ first _ nav。位置().左-0.5 * w _ ts _ thumbnals 0.5 * $ first _ nav。宽度()；$ ts _ thumbnals。CSS({宽： w _ ts _ thumbnals ' px，高：h _ ts _ thumbnals ' px，顶：t _ ts _ thumbnals ' px，左： l _ ts _ thumbnals ' px ' })；/*计算出提示箭头的上方和左边的位置大拇指高度边框(2*5)左-(拇指宽度边框)/2-width/2 */var t _ arrow=o . thumb _ height 2 * 5，l _ arrow=(o . thumb _ width 2 * 5)/2-$ arrow。width()/2；$箭头。CSS({左： l _ arrow ' px '，顶：t _ arrow ' px ' })；/*计算出$ ts _预览的宽度-缩略图的宽度乘以所有缩略图的数量*/$ts_preview.css('width '，total _ elems * o . thumb _ width ' px ')；/*设定$ ts _预览_包装的宽度和高度-拇指宽/拇指高*/$ ts _ preview _ wrap。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 _缩略图最新的左侧距离*/var new _ left=$ nav _ elem。位置().左侧-0.5 * w _ ts _缩略图0.5 * $ nav _ elem。宽度()；$ ts _缩略图. stop(真)。显示()。动画({left: new_left 'px'}，o.speed，o . easing)；/*动画从$ ts _预览的左侧过渡到右边的缩略图*/$ts_preview.stop(真)。动画({ left :-idx * o . thumb _ width ' px ' }，o.speed，o . easing)；//当鼠标停留的时候图片进行放大if(o . zoom o . zoom ratio 1){ var new _ width=o . zoom ratio * o . thumb _ width，new _ height=o . zoom ratio * o . thumb _ height；//增加$ ts _预览的宽度为了能够让图片放大var ts _ preview _ w=$ ts _ preview。宽度()；$ts_preview.css('width '，(ts _ preview _ w-o。thumb _ width new _ width)' px ')；$ts_preview.children().情商.查找(' img ').停止()。动画({width: new_width 'px '，height: new_height 'px'}，o . zoomspeed)；}}).bind('mouseleave '，function(){//如果放大了设置它的宽度和高度为默认值if(o . zoom o . zoom ratio 1){ var $ nav _ elem=$(this)，idx=$ nav _ elem。index()；$ts_preview.children().情商.查找(' img ').停止()。CSS({ width : o . thumb _ width ' px '，height : o . thumb _ height ' px ' })；} $ ts _ thumbnals。停止(真).hide()；}).bind('click '，function(){var $nav_elem=$(this)，idx=$ nav _ elem。index()；o . OnClick(idx)；});});};$ .fn。缩略图滑块。默认={速度： 100，//幻灯片过渡的动画速度eas :“js wing”，//宽松动画效果thumb_width: 75，//您的图片宽度thumb_height: 75，//您的图片高度zoom: false，//缩略图是否放大zoomratio: 1.3，//放大比率（数值必须大于1)zoomspeed: 15000，//放大动画的速度onClick:函数(){返回false}//点击回发};})(jQuery)；完整实例代码点击此处本站下载。

希望本文对大家的jQuery程序设计有所帮助。