一個javascript圖片閱覽組件

就是圖片切換的效果是可自訂的，通過這個組件，我們可以自訂出很多效果，不過這個東西還不算最終完成，現在搞出來先讓大家試試 複製代碼 代碼如下:var pola=new PhotoLook("contain");//建立PhotoLook對象

這就是執行個體化這個組件的語句，cantain是你指定div的ID,這個是使用組件的人自己定義的 複製代碼 代碼如下:/*PhotoLook大小的設定*/
pola.width=240;
pola.height=320;
/*添加圖片*/
pola.add("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg");
pola.add("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg");
pola.add("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg");
pola.add("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg");
pola.add("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg");
pola.add("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg");
pola.add("http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg");
pola.add("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg");
pola.add("http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg");
pola.init();

定義組件大小，還有利用提供的add方法來添加圖片，然後調用init來初始化 複製代碼 代碼如下:/*淡出效果，效果可以自己做，自己添加，這個只是比較經典的（效果要接受一個參數，就是每一個小div，我們對它進行處理）*/
var fadeOut=function(div){
div.style.zIndex=1;
div.style.opacity=0;
div.style.filter="Alpha(Opacity='0')";
//div.filters.alpha.opacity=20;
(function(div,opacity){
var hide=function()
{
opacity=opacity+0.1;
div.style.opacity=opacity;
div.style.filter="Alpha(Opacity='"+opacity*100 +"')";
if(opacity<1)
{
setTimeout(hide,100);
}
}
hide();
})(div,0)

} ;

添加一個淡出效果，注意，這個效果不是一定的，我們可以自己做出其他效果，再調用addswitchMethod來添加進組件對象裡：
/*添加淡出效果（可以添加很多效果，並設定效果出現的順序）*/
pola.addswitchMethod(fadeOut,"show");

下面是下面那個試例的效果矩陣配置 複製代碼 代碼如下:/*添加效果矩陣，仔細看矩陣數位分布就可以知道哥大概了，數字小的會先發生效果*/
pola.addswitchTable([[1,2,3,4],[2,3,4,5],[3,4,5,6],[4,5,6,7]]);
pola.addswitchTable([[1,2,1,2],[2,1,2,1],[1,2,1,2],[2,1,2,1]]);
pola.addswitchTable([[1,2,3,4],[1,2,3,4],[1,2,3,4],[1,2,3,4]]);
pola.addswitchTable([[1,2,3,4],[12,13,14,5],[11,16,15,6],[10,9,8,7]]);
pola.addswitchTable([[1,2,3,4],[8,7,6,5],[5,6,7,8],[4,3,2,1]]);
pola.addswitchTable([[1,2,3,1],[3,4,4,2],[2,4,4,3],[1,3,2,1]]);
pola.addswitchTable([[1,1,4,4],[1,1,4,4],[3,3,2,2],[3,3,2,2]]);
pola.addswitchTable([[1,10,4,14],[9,3,13,7],[2,12,6,16],[11,5,15,8]]);

大家一看就應該知道效果矩陣和轉場效果之間的關係了吧。
下面大家看看一個例子吧，對了，因為圖片都是從互連網上面直接拿的，都沒有經過處理，第一輪切換的時候會有點卡卡的感覺，但是當它所有圖片都緩衝好的時候就不卡了，就可以看到完整的效果
以後會加上預先載入的功能，就可以大大減少這種情況的影響了（話說這些圖片也太大了，無奈不知怎麼在部落格園上傳圖片，或者根本就沒得上傳）
只有大家點擊了“初始化”按鈕之後才可以看到相簿。。。
完整配置代碼 複製代碼 代碼如下:var pola=new PhotoLook("contain");//建立PhotoLook對象
/*PhotoLook大小的設定*/
pola.width=240;
pola.height=320;
/*添加圖片*/
pola.add("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg");
pola.add("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg");
pola.add("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg");
pola.add("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg");
pola.add("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg");
pola.add("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg");
pola.add("http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg");
pola.add("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg");
pola.add("http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg");
pola.init();
/*淡出效果，效果可以自己做，自己添加，這個只是比較經典的（效果要接受一個參數，就是每一個小div，我們對它進行處理）*/
var fadeOut=function(div){
div.style.zIndex=1;
div.style.opacity=0;
div.style.filter="Alpha(Opacity='0')";
//div.filters.alpha.opacity=20;
(function(div,opacity){
var hide=function()
{
opacity=opacity+0.1;
div.style.opacity=opacity;
div.style.filter="Alpha(Opacity='"+opacity*100 +"')";
if(opacity<1)
{
setTimeout(hide,100);
}
}
hide();
})(div,0)

} ;

/*添加淡出效果（可以添加很多效果，並設定效果出現的順序）*/
pola.addswitchMethod(fadeOut,"show");

/*添加效果矩陣，仔細看矩陣數位分布就可以知道哥大概了，數字小的會先發生效果*/
pola.addswitchTable([[1,2,3,4],
[2,3,4,5],
[3,4,5,6],
[4,5,6,7]]);
pola.addswitchTable([[1,2,1,2],
[2,1,2,1],
[1,2,1,2],
[2,1,2,1]]);
pola.addswitchTable([[1,2,3,4],
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]]);
pola.addswitchTable([[1,2,3,4],
[12,13,14,5],
[11,16,15,6],
[10,9,8,7]]);
pola.addswitchTable([[1,2,3,4],
[8,7,6,5],
[5,6,7,8],
[4,3,2,1]]);
pola.addswitchTable([[1,2,3,1],
[3,4,4,2],
[2,4,4,3],
[1,3,2,1]]);
pola.addswitchTable([[1,1,4,4],
[1,1,4,4],
[3,3,2,2],
[3,3,2,2]]);
pola.addswitchTable([[1,10,4,14],
[9,3,13,7],
[2,12,6,16],
[11,5,15,8]]);

/*給各按鈕添加事件處理常式，這部分已經不算配置PhotoLook了*/
var buttonautoPlay=document.getElementById("autoPlay");
buttonautoPlay.onclick=function(){
pola.autoPlay(4000);
}
var buttonstopAutoPlay=document.getElementById("stopAutoPlay");
buttonstopAutoPlay.onclick=function(){
pola.stopAutoPlay();
}
var buttonturn = document.getElementById("turn");
var textBox = document.getElementById("Text1");
buttonturn.onclick = function() {
pola.goTo(parseInt(textBox.value));
}
var buttonprevious = document.getElementById("previous");
buttonprevious.onclick = function() {
pola.previous();
}
var buttonnext = document.getElementById("next");
buttonnext.onclick = function() {
pola.next();
}

組件代碼下載