超贊的jQuery幻燈插件 附下載
應(yīng)朋友的邀請(qǐng)，幫他公司做jQuery縮略圖正中間的為當(dāng)前播放到的圖片，兩邊呈發(fā)散狀，逐漸縮小并降低透明度。假設(shè)當(dāng)前正播放到第0張圖片，則排列情況如下：
縮略圖正中間的為當(dāng)前播放到的圖片，兩邊呈發(fā)散狀，逐漸縮小并降低透明度。假設(shè)當(dāng)前正播放到第0張圖片，則排列情況如下：
0
1 4
2 3
按逆時(shí)針方向轉(zhuǎn)一張圖后的排列情況如下：
4
0 3
1 2
這個(gè)只是縮略圖的播放效果，縮略圖輪轉(zhuǎn)時(shí)，后面有對(duì)應(yīng)大圖跟著從右到左滾進(jìn)，并且大圖進(jìn)入的速度要對(duì)應(yīng)著縮略圖輪轉(zhuǎn)，整體效果如下：
一個(gè)幻燈播放效果，效果如下：
本人考慮將縮略圖輪轉(zhuǎn)與大圖的滾進(jìn)分開兩部分，縮略圖輪轉(zhuǎn)做為一個(gè)單獨(dú)的jQuery插件，由此插件中的事件帶動(dòng)大圖的滾進(jìn)。下面先來說說縮略圖的輪轉(zhuǎn)插件的實(shí)現(xiàn)：
1、插件的參數(shù)：
- this.defaults = {
- auto: false, //是否自動(dòng)播放
- width: 85, //縮略圖的寬度
- height: 42, //縮略圖的高度
- onstart: null, //開始滾動(dòng)
- onchange: null //滾動(dòng)事件
- };
2、插件的事件：
onstart事件，為每次開始啟動(dòng)輪轉(zhuǎn)時(shí)觸發(fā)一次，轉(zhuǎn)出的參數(shù)有：當(dāng)前縮略圖的jQuery對(duì)象與輪轉(zhuǎn)到下一次縮略圖的jQuery對(duì)象：
- 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ù)：
- opt.onchange && opt.onchange(stepPercent[step]);
下面將要說到 stepPercent[step] 這個(gè)數(shù)組：
縮略圖輪轉(zhuǎn)采用定時(shí)不定速度的方式，即每次輪轉(zhuǎn)不過時(shí)輪轉(zhuǎn)一張圖還是兩張圖，時(shí)間都是固定的，但是輪轉(zhuǎn)兩張圖的速度要比輪轉(zhuǎn)一張圖速度要快，這樣即使有再多的圖，滾動(dòng)的距離再遠(yuǎn)，也不至于要很久才能滾到。
stepPercent[step] 這個(gè)數(shù)組正是為這個(gè)設(shè)計(jì)的，每次輪轉(zhuǎn)，都固定走15步，每一步輪轉(zhuǎn)的距離都逐漸縮小.
- var stepPercent = new Array(15);
- //固定走15步，每步走至百分之多少的一個(gè)數(shù)列。 表示經(jīng)過時(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ì)出來的呢，我是用Excel，找一個(gè)單元格填上0.2，下一格公式為上一格的0.81，然后往下多拖一點(diǎn)，然后將上面的累加到接近1的數(shù)值，就是要的步數(shù)了。)
這個(gè)數(shù)列如果不用JS生成，其實(shí)也可以將Excel中創(chuàng)建出來的數(shù)列直接定義一個(gè)數(shù)組，以后如果想要修改速度，再照做一次就行。
輪轉(zhuǎn)時(shí)，縮略圖的尺寸、透明度、位置等信息的計(jì)算，都采用此stepPercent數(shù)組設(shè)定好的比例因子。
關(guān)于插件其他不在贅述，請(qǐng)直接下載源代碼查看，下面說說大圖如何跟著縮略圖滾動(dòng)。
3、大圖滾動(dòng)
大圖在隨著縮略圖滾動(dòng)時(shí)，不過滾動(dòng)到第幾張，表現(xiàn)出來的效果都是緊跟著當(dāng)前大圖的后面滾進(jìn)，以防跳過太多張時(shí)，由于速度太快，造成眼花繚亂的感覺，所以這里這個(gè)onstart事件就派上用場了。
在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)就這么簡單。具體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);
- //初始時(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"
- });
- });
源碼下載：SlideDemo
原文鏈接：http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html
【編輯推薦】
