jQuery 幻燈片插件(帶縮略圖功能)

更新時間：2011年01月24日 20:20:20 作者：

非常不錯的一款帶縮略圖功能的基于jquery的幻燈片插件，需要的朋友可以參考下。

應朋友的邀請，幫他公司做一個幻燈播放效果，效果如下：

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

　　　?。?

　　?。薄。?

　?。病　　。?

　　按逆時針方向轉一張圖后的排列情況如下：

　　　?。?

　　　０?。?

　　１　　　２

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

下面將要說到 stepPercent[step] 這個數(shù)組：
　　縮略圖輪轉采用定時不定速度的方式，即每次輪轉不過時輪轉一張圖還是兩張圖，時間都是固定的，但是輪轉兩張圖的速度要比輪轉一張圖速度要快，這樣即使有再多的圖，滾動的距離再遠，也不至于要很久才能滾到。
　　stepPercent[step] 這個數(shù)組正是為這個設計的，每次輪轉，都固定走１５步，每一步輪轉的距離都逐漸縮小，這樣就達到了一個變速的效果，生成此數(shù)組的如下：

復制代碼代碼如下:

 
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步直接設置成1，即100%，滾動結束。
　?。ㄗⅲ哼@個數(shù)列是如何設計出來的呢，我是用Excel，找一個單元格填上0.2，下一格公式為上一格的0.81，然后往下多拖一點，然后將上面的累加到接近1的數(shù)值，就是要的步數(shù)了。）
　　這個數(shù)列如果不用ＪＳ生成，其實也可以將Excel中創(chuàng)建出來的數(shù)列直接定義一個數(shù)組，以后如果想要修改速度，再照做一次就行。
　　
　　輪轉時，縮略圖的尺寸、透明度、位置等信息的計算，都采用此stepPercent數(shù)組設定好的比例因子。
　　關于插件其他不在贅述，請直接下載源代碼查看，下面說說大圖如何跟著縮略圖滾動。
　3、大圖滾動
　　大圖在隨著縮略圖滾動時，不過滾動到第幾張，表現(xiàn)出來的效果都是緊跟著當前大圖的后面滾進，以防跳過太多張時，由于速度太快，造成眼花繚亂的感覺，所以這里這個onstart事件就派上用場了。
　　在onstart事件中，先將當前圖移動到大圖列表首位、再將目標圖移動到當前圖的后面，（注：要將當前圖移動到大圖列表首位，是因為有可能下一張在當前張的前面，當前張移到后面，滾動條位置會動）。
　　然后在onchange事件中，只要根據(jù)傳入的進度參數(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)當滾動條不在頭時，按F5刷新，滾動條不會跳到頭。 
$("#div_Slide").css({ 
"top": (bigDivPos.top + bigDiv.height() - $("#div_Slide").height()) + "px", 
"left": bigDivPos.left + "px" 
}); 
}); 