DIV CSS 佈局教程網

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

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

　　　　０

　　　１　４

　　２　　　３

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

　　　　４

　　　０　３

　　１　　　 ２

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

本人考慮將縮略圖輪轉與大圖的滾進分開兩部分，縮略圖輪轉做為一個單獨的jQuery插件，由此插件中的事件帶動大圖的滾進。下面先來說說縮略圖的輪轉插件的實現：
１、插件的參數：
代碼如下:
this.defaults = {
auto: false, //是否自動播放
width: 85, //縮略圖的寬度
height: 42, //縮略圖的高度
onstart: null, //開始滾動
onchange: null //滾動事件
};

2、插件的事件：
　　onstart事件，為每次開始啟動輪轉時觸發一次，轉出的參數有：當前縮略圖的jQuery對象與輪轉到下一次縮略圖的jQuery對象：
代碼如下:
opt.onstart && opt.onstart(me.Images.img[curIdx].img$, me.Images.img[idx].img$);

onchange事件，為每滾動一次距離就觸發一次，並且當前滾動至百分之多少的進度參數：
代碼如下:
opt.onchange && opt.onchange(stepPercent[step]);

下面將要說到 stepPercent[step] 這個數組：
　　縮略圖輪轉采用定時不定速度的方式，即每次輪轉不過時輪轉一張圖還是兩張圖，時間都是固定的，但是輪轉兩張圖的速度要比輪轉一張圖速度要快，這樣即使有再多的圖，滾動的距離再遠，也不至於要很久才能滾到。
　　stepPercent[step] 這個數組正是為這個設計的，每次輪轉，都固定走１５步，每一步輪轉的距離都逐漸縮小，這樣就達到了一個變速的效果，生成此數組的如下：
代碼如下:
var stepPercent = new Array(15); //固定走15步，每步走至百分之多少的一個數列。 表示經過時間一定，速度不固定
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; //初始化數列。
total = stepPercent[i];
if (i == stepPercent.length - 1)
stepPercent[i] = 1;
}

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

源碼下載：http://xiazai.jb51.net/201101/yuanma/SlideDemo_jb51.rar
在使用中發現有問題或者有可改進的地方，請留言，謝謝。