应朋友的邀请，我帮他的公司做了一个幻灯片。效果如下：。

缩略图正中间是当前播放的图片，两边发散，逐渐缩小，透明度降低。假设目前正在播放第0张图片，排列如下：0 1 4 2 3逆时针转动一张图片后的排列如下：4 0 3 1 2这只是缩略图的播放效果。缩略图旋转时，对应的大图片从右向左滚动进来，大图片进入的速度应该对应缩略图旋转。整体效果如下：。

我考虑将缩略图旋转与大图的滚动分离开来。缩略图旋转作为单独的jQuery插件使用，插件中的事件驱动大图的滚动。首先来说说缩略图旋转插件的实现：1。插件参数：复制代码如下：这个。默认值={auto: false，//是否自动播放width3360 85，//缩略图宽度height: 42，//缩略图高度onstart3360 null，//开始滚动onchange: null /。2.插件事件：onstart事件，每次旋转开始时触发。传递的参数为：当前缩略图的jQuery对象和旋转到下一个缩略图的jQuery对象：复制代码如下： opt . onstart pt . onstart(me . images . img[curidx]。img $，me.images.img [idx]。每次滚动距离都会触发onchange事件，当前进度参数滚动到什么百分比：复制代码如下： opt . onchange . onchange(step percent[step])；接下来我们来说说stepPercent[step]的数组：缩略图旋转采用定时不确定速度的方法，即每次旋转一张或两张图片都不晚，时间是固定的，但是旋转两张图片的速度要比旋转一张图片的速度快，这样即使图片多，滚动的距离也不会太长。步长百分比[步长]该数组就是为此目的而设计的。每转15个固定步，每转的距离逐渐减小，从而达到变速效果。数组生成如下：复制代码如下： var Step percent=新数组(15)；//以固定的方式走15步，每走一步都要经过一系列的百分比。意味着经过的时间是固定的，速度不是固定的。step percent[0]=0.2；//前20% step percent[1]=0.2 0.2 * 0.81；//第二步为(var I=2，total=step percent[1]；长度；i ) {步长百分比[i]=总计(总计-步长百分比[I-2])* 0.81；//初始化序列。total=step percent[I]；if(I==step percent . length-1)step percent[I]=1；}开始的时候第一步是20%，然后每一步都是上一步的81%，也就是速度每次下降19%，但是十进制计算有误差，可能是接近1的值但是第15步没有1，所以第15步直接设置为1，也就是100%，滚动结束。(注：这个系列是怎么设计的？我用Excel找一个单元格，填0.2。下一个单元格中的公式是上一个单元格中的0.81，然后再向下拖动一点，然后将其加起来，得到一个接近1的值，这就是所需的步数。)如果这个数列不是JS生成的，其实在Excel中创建的数列也可以直接定义为数组。如果以后想修改速度，就再做一次。在旋转过程中，缩略图的大小、透明度、位置和其他信息是通过使用此步长百分比数组设置的比例因子来计算的。我不需要深入其他插件的细节。请直接下载源代码。让我们来谈谈大图像是如何随着缩略图滚动的。3.大图滚动当大图随缩略图一起滚动，但滚动到哪一页时，显示的效果是紧接着当前大图后面滚进去，以防跳过太多页，造成眼花缭乱的感觉，所以这里的这个onstart事件就派上用场了。在onstart事件中，首先将当前图片移动到大图片列表的顶部，然后将目标图片移动到当前图片的后面。(注意：将当前图片移到大图列表顶部的原因是下一张可能在当前的前面，而当前的会移到后面，滚动条位置也会移动。).然后在onchange事件中，只需要根据传入的进度参数设置水平滚动条的滚动距离，大图的滚动就这么简单。

具体射流研究…如下：复制代码代码如下： $(函数(){ $(' # div _ Slide ')).幻灯片({ auto: true，width: 85，height: 42，onstar : function(curi mg，nextImg){ var cData=curi mg。attr('数据')；var nData=nextimg。attr('数据')；var bigCur=$('#' cData)，BigNext=$(' # ' nData)；var allBigImg=bigCur.parent().儿童(“img”)；var curIndex=allbigimg。索引(BigCur[0])；var nextIndex=all bigimg。索引(下一个大[0])；var first img=$(all big img[0])；if (firstImg.attr('id ')！=BigCur。attr(' id '))BigCur。在(第一个IMg)之前插入；$('#div_BigImg ').scroll ft(0)；下一个。insert after(BigCur)；}，onchange:函数（百分比){ $('#div_BigImg ').scroll ft(1263 *百分比);} });var BigDiv=$(' # Div _ BigImg ')；var BigDivPoS=BigDiv。position()；bigdiv。scroll ft(0)；//初始时将滚动条滚到头，是因为我发现当滚动条不在头时，按F5刷新，滚动条不会跳到头$('#div_Slide ').CSS({ ' top ' :(BigDiv pos。顶级BigDiv。高度()-$(' # div _ Slide ').height()) 'px '，' left ' : BigDivPos。左' px ' })；});源码下载：http://小哉。JB 51。net/201101/马援/SlideDemo_jb51.rar在使用中发现有问题或者有可改进的地方，请留言，谢谢。