jQuery 幻灯片插件(带缩略图功能)

应朋友的邀请，帮他公司做一个幻灯播放效果，效果如下：

缩略图正中间的为当前播放到的图片，两边呈发散状，逐渐缩小并降低透明度。假设当前正播放到第０张图片，则排列情况如下：

　　　　０

　　　１　４

　　２　　　３

　　按逆时针方向转一张图后的排列情况如下：

　　　　４

　　　０　３

　　１　　　 ２

　　这个只是缩略图的播放效果，缩略图轮转时，后面有对应大图跟着从右到左滚进，并且大图进入的速度要对应着缩略图轮转，整体效果如下：

本人考虑将缩略图轮转与大图的滚进分开两部分，缩略图轮转做为一个单独的jQuery插件，由此插件中的事件带动大图的滚进。下面先来说说缩略图的轮转插件的实现：
１、插件的参数：

2、插件的事件：
　　onstart事件，为每次开始启动轮转时触发一次，转出的参数有：当前缩略图的jQuery对象与轮转到下一次缩略图的jQuery对象：

onchange事件，为每滚动一次距离就触发一次，并且当前滚动至百分之多少的进度参数：

下面将要说到 stepPercent[step] 这个数组：
　　缩略图轮转采用定时不定速度的方式，即每次轮转不过时轮转一张图还是两张图，时间都是固定的，但是轮转两张图的速度要比轮转一张图速度要快，这样即使有再多的图，滚动的距离再远，也不至于要很久才能滚到。
　　stepPercent[step] 这个数组正是为这个设计的，每次轮转，都固定走１５步，每一步轮转的距离都逐渐缩小，这样就达到了一个变速的效果，生成此数组的如下：

起始第一步走20%，此后每一步都是前一步的81%，即速度每次递减19%，但是小数计算有个误差，到第15步时可能是个很接近于1，但是不是1的一个数值，所以，将第15步直接设置成1，即100%，滚动结束。
　　（注：这个数列是如何设计出来的呢，我是用Excel，找一个单元格填上0.2，下一格公式为上一格的0.81，然后往下多拖一点，然后将上面的累加到接近1的数值，就是要的步数了。）
　　这个数列如果不用ＪＳ生成，其实也可以将Excel中创建出来的数列直接定义一个数组，以后如果想要修改速度，再照做一次就行。
　　
　　轮转时，缩略图的尺寸、透明度、位置等信息的计算，都采用此stepPercent数组设定好的比例因子。
　　关于插件其他不在赘述，请直接下载源代码查看，下面说说大图如何跟着缩略图滚动。
　3、大图滚动
　　大图在随着缩略图滚动时，不过滚动到第几张，表现出来的效果都是紧跟着当前大图的后面滚进，以防跳过太多张时，由于速度太快，造成眼花缭乱的感觉，所以这里这个onstart事件就派上用场了。
　　在onstart事件中，先将当前图移动到大图列表首位、再将目标图移动到当前图的后面，（注：要将当前图移动到大图列表首位，是因为有可能下一张在当前张的前面，当前张移到后面，滚动条位置会动）。
　　然后在onchange事件中，只要根据传入的进度参数，设置横滚动条的滚动距离就行了，大图的滚动就这么简单。具体JS如下：

源码下载：http://xiazai.uoften.com/201101/yuanma/SlideDemo_jb51.rar
在使用中发现有问题或者有可改进的地方，请留言，谢谢。

最后

以上就是感动期待为你收集整理的jQuery 幻灯片插件(带缩略图功能)的全部内容，希望文章能够帮你解决jQuery 幻灯片插件(带缩略图功能)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。