應(yīng)朋友的邀請，幫他公司做jQuery縮略圖正中間的為當(dāng)前播放到的圖片，兩邊呈發(fā)散狀，逐漸縮小并降低透明度。假設(shè)當(dāng)前正播放到第0張圖片，則排列情況如下：

縮略圖正中間的為當(dāng)前播放到的圖片，兩邊呈發(fā)散狀，逐漸縮小并降低透明度。假設(shè)當(dāng)前正播放到第0張圖片，則排列情況如下：

0

1　4

2　　　3

按逆時針方向轉(zhuǎn)一張圖后的排列情況如下：

4

0　3

1　　　 2

這個只是縮略圖的播放效果，縮略圖輪轉(zhuǎn)時，后面有對應(yīng)大圖跟著從右到左滾進，并且大圖進入的速度要對應(yīng)著縮略圖輪轉(zhuǎn)，整體效果如下：

一個幻燈播放效果，效果如下：

本人考慮將縮略圖輪轉(zhuǎn)與大圖的滾進分開兩部分，縮略圖輪轉(zhuǎn)做為一個單獨的jQuery插件，由此插件中的事件帶動大圖的滾進。下面先來說說縮略圖的輪轉(zhuǎn)插件的實現(xiàn)：

1、插件的參數(shù)：

this.defaults = {  
       auto: false,        //是否自動播放  
       width: 85,          //縮略圖的寬度  
       height: 42,         //縮略圖的高度  
       onstart: null,      //開始滾動  
       onchange: null     //滾動事件  
}; 

2、插件的事件：

onstart事件，為每次開始啟動輪轉(zhuǎn)時觸發(fā)一次，轉(zhuǎn)出的參數(shù)有：當(dāng)前縮略圖的jQuery對象與輪轉(zhuǎn)到下一次縮略圖的jQuery對象：

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

onchange事件，為每滾動一次距離就觸發(fā)一次，并且當(dāng)前滾動至百分之多少的進度參數(shù)：

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

下面將要說到 stepPercent[step] 這個數(shù)組：

縮略圖輪轉(zhuǎn)采用定時不定速度的方式，即每次輪轉(zhuǎn)不過時輪轉(zhuǎn)一張圖還是兩張圖，時間都是固定的，但是輪轉(zhuǎn)兩張圖的速度要比輪轉(zhuǎn)一張圖速度要快，這樣即使有再多的圖，滾動的距離再遠(yuǎn)，也不至于要很久才能滾到。

stepPercent[step] 這個數(shù)組正是為這個設(shè)計的，每次輪轉(zhuǎn)，都固定走15步，每一步輪轉(zhuǎn)的距離都逐漸縮小.

var stepPercent = new Array(15);      
//固定走15步，每步走至百分之多少的一個數(shù)列。 表示經(jīng)過時間一定，速度不固定  
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;    
//初始化數(shù)列。  
    total = stepPercent[i];  
     if (i == stepPercent.length - 1)  
         stepPercent[i] = 1;  
} 

起始第一步走20%，此后每一步都是前一步的81%，即速度每次遞減19%，但是小數(shù)計算有個誤差，到第15步時可能是個很接近于1，但是不是1的一個數(shù)值，所以，將第15步直接設(shè)置成1，即100%，滾動結(jié)束。

(注：這個數(shù)列是如何設(shè)計出來的呢，我是用Excel，找一個單元格填上0.2，下一格公式為上一格的0.81，然后往下多拖一點，然后將上面的累加到接近1的數(shù)值，就是要的步數(shù)了。)

這個數(shù)列如果不用JS生成，其實也可以將Excel中創(chuàng)建出來的數(shù)列直接定義一個數(shù)組，以后如果想要修改速度，再照做一次就行。

輪轉(zhuǎn)時，縮略圖的尺寸、透明度、位置等信息的計算，都采用此stepPercent數(shù)組設(shè)定好的比例因子。

關(guān)于插件其他不在贅述，請直接下載源代碼查看，下面說說大圖如何跟著縮略圖滾動。

3、大圖滾動

大圖在隨著縮略圖滾動時，不過滾動到第幾張，表現(xiàn)出來的效果都是緊跟著當(dāng)前大圖的后面滾進，以防跳過太多張時，由于速度太快，造成眼花繚亂的感覺，所以這里這個onstart事件就派上用場了。

在onstart事件中，先將當(dāng)前圖移動到大圖列表首位、再將目標(biāo)圖移動到當(dāng)前圖的后面，(注：要將當(dāng)前圖移動到大圖列表首位，是因為有可能下一張在當(dāng)前張的前面，當(dāng)前張移到后面，滾動條位置會動)。

然后在onchange事件中，只要根據(jù)傳入的進度參數(shù)，設(shè)置橫滾動條的滾動距離就行了，大圖的滾動就這么簡單。具體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);　  
　　　//初始時將滾動條滾到頭，是因為我發(fā)現(xiàn)當(dāng)滾動條不在頭時，按F5刷新，滾動條不會跳到頭。  
 
    $("#div_Slide").css({  
        "top": (bigDivPos.top + bigDiv.height() - $("#div_Slide").height()) + "px",  
        "left": bigDivPos.left + "px" 
    });  
}); 

源碼下載：SlideDemo

原文鏈接：http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html

【編輯推薦】

1. 10款給力構(gòu)建易用性網(wǎng)站的jQuery插件
2. 10個超贊超實用的免費jQuery圖片插件 附下載
3. jQuery 1.5第一個Beta版發(fā)布 付下載
4. 超炫無比 10個免費的jQuery相冊（附下載）
5. 好戲連臺 2010年最佳jQuery插件揭曉（附下載）