建站
咨詢
售后
建站咨詢
新聞中心
應(yīng)朋友的邀請，幫他公司做jQuery縮略圖正中間的為當(dāng)前播放到的圖片，兩邊呈發(fā)散狀，逐漸縮小并降低透明度。假設(shè)當(dāng)前正播放到第0張圖片，則排列情況如下：
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計,潁泉網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:潁泉等地區(qū)。潁泉做網(wǎng)站價格咨詢:18980820575
縮略圖正中間的為當(dāng)前播放到的圖片，兩邊呈發(fā)散狀，逐漸縮小并降低透明度。假設(shè)當(dāng)前正播放到第0張圖片，則排列情況如下：
0
1 4
2 3
按逆時針方向轉(zhuǎn)一張圖后的排列情況如下：
4
0 3
1 2
這個只是縮略圖的播放效果，縮略圖輪轉(zhuǎn)時，后面有對應(yīng)大圖跟著從右到左滾進(jìn)，并且大圖進(jìn)入的速度要對應(yīng)著縮略圖輪轉(zhuǎn)，整體效果如下：
一個幻燈播放效果，效果如下：
本人考慮將縮略圖輪轉(zhuǎn)與大圖的滾進(jìn)分開兩部分，縮略圖輪轉(zhuǎn)做為一個單獨的jQuery插件，由此插件中的事件帶動大圖的滾進(jìn)。下面先來說說縮略圖的輪轉(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)前滾動至百分之多少的進(jìn)度參數(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)前大圖的后面滾進(jìn)，以防跳過太多張時，由于速度太快，造成眼花繚亂的感覺，所以這里這個onstart事件就派上用場了。
在onstart事件中，先將當(dāng)前圖移動到大圖列表首位、再將目標(biāo)圖移動到當(dāng)前圖的后面，(注：要將當(dāng)前圖移動到大圖列表首位，是因為有可能下一張在當(dāng)前張的前面，當(dāng)前張移到后面，滾動條位置會動)。
然后在onchange事件中，只要根據(jù)傳入的進(jìn)度參數(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"
- });
- });
當(dāng)前文章：超贊的jQuery幻燈插件附下載
當(dāng)前URL：http://www.dlmjj.cn/article/coejsho.html
