应朋友的邀请，帮他公司做jQuery缩略图正中间的为当前播放到的图片，两边呈发散状，逐渐缩小并降低透明度。假设当前正播放到第0张图片，则排列情况如下：

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

0

1　4

2　3

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

4

0　3

1　 2

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

一个幻灯播放效果，效果如下：

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

1、插件的参数：

    

     

      
       
        this
       
       
        .defaults = {  
       
      
     
     

      
              auto: 
      
      
       false
      
      
       ,        
      
      
       //是否自动播放
      
      
        
      
     
     

      
              width: 85,          
      
      
       //缩略图的宽度
      
      
        
      
     
     

      
              height: 42,         
      
      
       //缩略图的高度
      
      
        
      
     
     

      
              onstart: 
      
      
       null
      
      
       ,      
      
      
       //开始滚动
      
      
        
      
     
     

      
              onchange: 
      
      
       null
      
      
            
      
      
       //滚动事件
      
      
        
      
     
     

      
       }; 
      
     
    
   

2、插件的事件：

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

    

     

      
       
        opt.onstart && opt.onstart  
       
      
     
     

      
       (me.Images.img[curIdx].img$, me.Images.img[idx].img$); 
      
     
    
   

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

    

     

      
       
        opt.onchange && opt.onchange(stepPercent[step]); 
       
      
     
    
   

下面将要说到 stepPercent[step] 这个数组：

缩略图轮转采用定时不定速度的方式，即每次轮转不过时轮转一张图还是两张图，时间都是固定的，但是轮转两张图的速度要比轮转一张图速度要快，这样即使有再多的图，滚动的距离再远，也不至于要很久才能滚到。

stepPercent[step] 这个数组正是为这个设计的，每次轮转，都固定走15步，每一步轮转的距离都逐渐缩小.

    

     

      
       
        var
       
       
         stepPercent = 
       
       
        new
       
       
         Array(15);      
       
      
     
     

      
       //固定走15步，每步走至百分之多少的一个数列。 表示经过时间一定，速度不固定
      
      
        
      
     
     

      
       stepPercent[0] = 0.2;               
      
      
       //起始20%
      
      
        
      
     
     

      
       stepPercent[1] = 0.2 + 0.2 * 0.81;   
      
      
       //第二步
      
      
        
      
     
     

      
       for
      
      
        (
      
      
       var
      
      
        i = 2, total = stepPercent[1];   
      
     
     

      
       i < stepPercent.length; i++) {  
      
     
     

      
           stepPercent[i] = total + (total - stepPercent[i - 2]) * 0.81;    
      
     
     

      
       //初始化数列。
      
      
        
      
     
     

      
           total = stepPercent[i];  
      
     
     

      
            
      
      
       if
      
      
        (i == stepPercent.length - 1)  
      
     
     

      
                stepPercent[i] = 1;  
      
     
     

      
       } 
      
     
    
   

起始第一步走20%，此后每一步都是前一步的81%，即速度每次递减19%，但是小数计算有个误差，到第15步时可能是个很接近于1，但是不是1的一个数值，所以，将第15步直接设置成1，即100%，滚动结束。

(注：这个数列是如何设计出来的呢，我是用Excel，找一个单元格填上0.2，下一格公式为上一格的0.81，然后往下多拖一点，然后将上面的累加到接近1的数值，就是要的步数了。)

这个数列如果不用JS生成，其实也可以将Excel中创建出来的数列直接定义一个数组，以后如果想要修改速度，再照做一次就行。

轮转时，缩略图的尺寸、透明度、位置等信息的计算，都采用此stepPercent数组设定好的比例因子。

关于插件其他不在赘述，请直接下载源代码查看，下面说说大图如何跟着缩略图滚动。

3、大图滚动

大图在随着缩略图滚动时，不过滚动到第几张，表现出来的效果都是紧跟着当前大图的后面滚进，以防跳过太多张时，由于速度太快，造成眼花缭乱的感觉，所以这里这个onstart事件就派上用场了。

在onstart事件中，先将当前图移动到大图列表首位、再将目标图移动到当前图的后面，(注：要将当前图移动到大图列表首位，是因为有可能下一张在当前张的前面，当前张移到后面，滚动条位置会动)。

然后在onchange事件中，只要根据传入的进度参数，设置横滚动条的滚动距离就行了，大图的滚动就这么简单。具体JS如下：
 

    

     

      
       
        $(
       
       
        function
       
       
        () {  
       
      
     
     

      
           $(
      
      
       "#div_Slide"
      
      
       ).Slide({  
      
     
     

      
               auto: 
      
      
       true
      
      
       ,  
      
     
     

      
               width: 85,  
      
     
     

      
               height: 42,  
      
     
     

      
               onstart: 
      
      
       function
      
      
       (curImg, nextImg) {  
      
     
     

      
                   
      
      
       var
      
      
        cData = curImg.attr(
      
      
       "data"
      
      
       );  
      
     
     

      
                   
      
      
       var
      
      
        nData = nextImg.attr(
      
      
       "data"
      
      
       );  
      
     
     

      
                   
      
      
       var
      
      
        bigCur = $(
      
      
       "#"
      
      
        + cData), bigNext = $(
      
      
       "#"
      
      
        + nData);  
      
     
     

      
        
      
     
     

      
                   
      
      
       var
      
      
        allBigImg = bigCur.parent().children(
      
      
       "img"
      
      
       );  
      
     
     

      
                   
      
      
       var
      
      
        curIndex = allBigImg.index(bigCur[0]);  
      
     
     

      
                   
      
      
       var
      
      
        nextIndex = allBigImg.index(bigNext[0]);  
      
     
     

      
        
      
     
     

      
                   
      
      
       var
      
      
        firstImg = $(allBigImg[0]);  
      
     
     

      
                   
      
      
       if
      
      
        (firstImg.attr(
      
      
       "id"
      
      
       ) != bigCur.attr(
      
      
       "id"
      
      
       ))  
      
     
     

      
                       bigCur.insertBefore(firstImg);  
      
     
     

      
                   $(
      
      
       "#div_BigImg"
      
      
       ).scrollLeft(0);  
      
     
     

      
                   bigNext.insertAfter(bigCur);  
      
     
     

      
               },  
      
     
     

      
               onchange: 
      
      
       function
      
      
       (percent) {  
      
     
     

      
                   $(
      
      
       "#div_BigImg"
      
      
       ).scrollLeft(1263 * percent);  
      
     
     

      
               }  
      
     
     

      
           });  
      
     
     

      
           
      
      
       var
      
      
        bigDiv = $(
      
      
       "#div_BigImg"
      
      
       );  
      
     
     

      
           
      
      
       var
      
      
        bigDivPos = bigDiv.position();  
      
     
     

      
           bigDiv.scrollLeft(0);　  
      
     
     

      
       　
      
      
       //初始时将滚动条滚到头，是因为我发现当滚动条不在头时，按F5刷新，滚动条不会跳到头。
      
      
        
      
     
     

      
        
      
     
     

      
           $(
      
      
       "#div_Slide"
      
      
       ).css({  
      
     
     

      
               
      
      
       "top"
      
      
       : (bigDivPos.top + bigDiv.height() - $(
      
      
       "#div_Slide"
      
      
       ).height()) + 
      
      
       "px"
      
      
       ,  
      
     
     

      
               
      
      
       "left"
      
      
       : bigDivPos.left + 
      
      
       "px"
      
      
        
      
     
     

      
           });  
      
     
     

      
       }); 
      
     
    
   

源码下载： SlideDemo

来源