一个用jQuery实现的缩略图预览滑块实例

本文演示了用jQuery实现的缩略图预览滑块，供大家参考：

运行效果如下图所示：

主要代码如下：

（函数（$）{）
美元。fn.thumbnailslider =功能（选项）{
变量选择（美元。fn.thumbnailslider.defaults，美元。延长= {}，选项）；
返回this.each（函数（）{（）
var $ = $（这个），
美元。元=美元。扩展（选择，pxs_container美元。数据）{ }，（选择）；
VaR ts_container美元=美元this.children（'。ts_container），
ts_thumbnails = $（美元ts_container.children '。ts_thumbnails），
nav_elems = $（美元ts_container.children李）不（ts_thumbnails美元），
total_elems = $ nav_elems.length，
ts_preview_wrapper = $（美元ts_thumbnails.children '。ts_preview_wrapper），
美元美元（'span ts_thumbnails.children箭头=），
ts_preview = $（美元ts_preview_wrapper.children '。ts_preview）；
*
ts_thumbnails美元的尺寸计算。
宽度>宽度缩略图+边框（2×5）
高度>高度缩略图+边框+三角形高度（6）
顶部>（高度加上5的边）
左-> leftdot - 0.5×宽0.5×widthnavdot
当鼠标导航时，它将被设置，默认值将被分配到导航的第一个预览点。
* /
无功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美元= $（0）nav_elems.eq，
l_ts_thumbnails = $（）first_nav.position。左0.5×w_ts_thumbnails＋0.5×first_nav.width美元（）；
ts_thumbnails.css美元（{
宽度：w_ts_thumbnails + 'px，
身高：h_ts_thumbnails + 'px，
上图：t_ts_thumbnails + 'px，
左：l_ts_thumbnails + 'px
}）；
*
计算箭头的左上角的位置。
顶部>拇指高度+边框（2×5）
左>（拇指宽度+边框） 2宽度 2
* /
无功t_arrow = o.thumb_height + 2 * 5，
l_arrow =（o.thumb_width + 2 * 5）/ 2至arrow.width（） / 2；
arrow.css美元（{
左：l_arrow + 'px，
上图：t_arrow + 'px
}）；
*
计算的ts_preview美元->缩略图乘以所有缩略图的宽度的数量
* /
ts_preview.css美元（'width '，total_elems * o.thumb_width + 'px）；
*
套ts_preview_wrapper美元的宽度和高度，宽度/高度拇指拇指
* /
ts_preview_wrapper.css美元（{
宽度：o.thumb_width + 'px，
身高：o.thumb_height + 'px
}）；
导航元素后的鼠标
nav_elems.bind美元（'mouseenter，函数（）{（）{
nav_elem = $（var $本），
IDX = nav_elem.index美元（）；
*
ts_thumbnails美元最新左距离计算
* /
无功new_left = nav_elem.position美元（）。左0.5×w_ts_thumbnails＋0.5×nav_elem.width美元（）；
ts_thumbnails.stop美元（真的）
显示（）
动画（{
左：new_left + 'px
}，o.speed，o.easing）；
*
从美元ts_preview左边右边的缩略图动画
* /
ts_preview.stop美元（真的）
动画（{
左：- IDX * o.thumb_width + 'px
}，o.speed，o.easing）；
当鼠标放大图片时
如果（o.zoom o.zoomratio > 1）{
无功new_width = o.zoomratio * o.thumb_width，
new_height = o.zoomratio * o.thumb_height；
美元的ts_preview / /为了增加宽度，使图片放大
无功ts_preview_w = ts_preview.width美元（）；
ts_preview.css美元（'width '，（（ts_preview_w - o.thumb_width + new_width）+ 'px）；
ts_preview.children美元（）。Eq（IDX）。发现（'img）。停止（）。动画（{
宽度：new_width + 'px，
身高：new_height + 'px
}，o.zoomspeed）；
}
}）。Bind（'mouseleave，函数（）{（）{
如果放大，将其宽度和高度设置为默认值。
如果（o.zoom o.zoomratio > 1）{
nav_elem = $（var $本），
IDX = nav_elem.index美元（）；
ts_preview.children美元（）。Eq（IDX）。发现（'img）。停止（）。Css（{
宽度：o.thumb_width + 'px，
身高：o.thumb_height + 'px
}）；
}
ts_thumbnails.stop美元（真的）
隐藏（）；
}）。Bind（听到咔哒声，函数（）{（）{
nav_elem = $（var $本），
IDX = nav_elem.index美元（）；
O.onClick（IDX）；
}）；
}）；
}；
fn.thumbnailslider.defaults = { {美元。
速度：100 幻灯片转换动画速度
宽松：'jswing ' / /宽松的动画
thumb_width：75 /你的图片的宽度
thumb_height：75 /你的图片的高度
缩放：假缩略图是否放大
zoomratio： / / 1.3，放大率（值必须大于1）
Zoomspeed：15000、对动画/放大的速度
OnClick：功能（{ return）false；} / /单击上一步
}；
}（jQuery）；

完整的实例代码在这里下载。

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