快捷導(dǎo)航

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

更新時(shí)間：2011年01月24日 20:20:20 作者：

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

應(yīng)朋友的邀請(qǐng)，幫他公司做一個(gè)幻燈播放效果，效果如下：

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

　　　?。?

　　?。薄。?

　?。病　　。?

　　按逆時(shí)針?lè)较蜣D(zhuǎn)一張圖后的排列情況如下：

　　　?。?

　　?。啊。?

　?。薄　　?２

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

本人考慮將縮略圖輪轉(zhuǎn)與大圖的滾進(jìn)分開(kāi)兩部分，縮略圖輪轉(zhuǎn)做為一個(gè)單獨(dú)的jQuery插件，由此插件中的事件帶動(dòng)大圖的滾進(jìn)。下面先來(lái)說(shuō)說(shuō)縮略圖的輪轉(zhuǎn)插件的實(shí)現(xiàn)：
１、插件的參數(shù)：

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 
var stepPercent = new Array(15); //固定走15步，每步走至百分之多少的一個(gè)數(shù)列。 表示經(jīng)過(guò)時(shí)間一定，速度不固定 
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ù)計(jì)算有個(gè)誤差，到第15步時(shí)可能是個(gè)很接近于1，但是不是1的一個(gè)數(shù)值，所以，將第15步直接設(shè)置成1，即100%，滾動(dòng)結(jié)束。
　?。ㄗⅲ哼@個(gè)數(shù)列是如何設(shè)計(jì)出來(lái)的呢，我是用Excel，找一個(gè)單元格填上0.2，下一格公式為上一格的0.81，然后往下多拖一點(diǎn)，然后將上面的累加到接近1的數(shù)值，就是要的步數(shù)了。）
　　這個(gè)數(shù)列如果不用ＪＳ生成，其實(shí)也可以將Excel中創(chuàng)建出來(lái)的數(shù)列直接定義一個(gè)數(shù)組，以后如果想要修改速度，再照做一次就行。
　　
　　輪轉(zhuǎn)時(shí)，縮略圖的尺寸、透明度、位置等信息的計(jì)算，都采用此stepPercent數(shù)組設(shè)定好的比例因子。
　　關(guān)于插件其他不在贅述，請(qǐng)直接下載源代碼查看，下面說(shuō)說(shuō)大圖如何跟著縮略圖滾動(dòng)。
　3、大圖滾動(dòng)
　　大圖在隨著縮略圖滾動(dòng)時(shí)，不過(guò)滾動(dòng)到第幾張，表現(xiàn)出來(lái)的效果都是緊跟著當(dāng)前大圖的后面滾進(jìn)，以防跳過(guò)太多張時(shí)，由于速度太快，造成眼花繚亂的感覺(jué)，所以這里這個(gè)onstart事件就派上用場(chǎng)了。
　　在onstart事件中，先將當(dāng)前圖移動(dòng)到大圖列表首位、再將目標(biāo)圖移動(dòng)到當(dāng)前圖的后面，（注：要將當(dāng)前圖移動(dòng)到大圖列表首位，是因?yàn)橛锌赡芟乱粡堅(jiān)诋?dāng)前張的前面，當(dāng)前張移到后面，滾動(dòng)條位置會(huì)動(dòng)）。
　　然后在onchange事件中，只要根據(jù)傳入的進(jìn)度參數(shù)，設(shè)置橫滾動(dòng)條的滾動(dòng)距離就行了，大圖的滾動(dòng)就這么簡(jiǎn)單。具體JS如下：

復(fù)制代碼代碼如下:

 
$(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);　　　　//初始時(shí)將滾動(dòng)條滾到頭，是因?yàn)槲野l(fā)現(xiàn)當(dāng)滾動(dòng)條不在頭時(shí)，按F5刷新，滾動(dòng)條不會(huì)跳到頭。 
$("#div_Slide").css({ 
"top": (bigDivPos.top + bigDiv.height() - $("#div_Slide").height()) + "px", 
"left": bigDivPos.left + "px" 
}); 
}); 