快捷導(dǎo)航

JS圖片瀏覽組件PhotoLook的公開屬性方法介紹和進(jìn)階實(shí)例代碼

更新時(shí)間：2010年11月09日 08:56:08 作者：

這次接著來介紹PhotoLook（前文介紹的組件）現(xiàn)在可供使用的屬性和方法，接著展示一個(gè)叫前文不一樣的例子

屬性
speed ：設(shè)置圖片切換的速度
width：組件的寬度
height：組件的高度
cellStructures：可設(shè)置效果矩陣的行列例如｛row:8,col:8｝注意，這個(gè)行列要和效果矩陣switchTable的行列對(duì)應(yīng)
方法
init（）：初始化
addswitchTable（switchTable）：添加效果矩陣
add（url）：添加圖片
addswitchMethod（func,type）：添加切換方法（例如淡出，滑出），現(xiàn)在功能未完整，type只能填"show"一個(gè)值
autoPlay（time）：自動(dòng)播放，自動(dòng)播放的速度不會(huì)小于speed
stopAutoPlay（）:停止自動(dòng)播放
goTo（）：跳轉(zhuǎn)到某一張圖片，必須處于沒有自動(dòng)播放狀態(tài)才行
previous（）：上一頁
next（）：下一頁

例子，這個(gè)例子比起前文（介紹一個(gè)JS圖片瀏覽組件）的例子，利用cellStructures改變了默認(rèn)的矩陣的行列，并且展示了計(jì)數(shù)（1，2，3，4，5，6，GO）效果的圖片切換
本次的配置代碼

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

 
var pola=new PhotoLook("contain");//建立PhotoLook對(duì)象 
/*PhotoLook大小的設(shè)置*/ 
pola.width=240; 
pola.height=320; 
pola.cellStructures=[{row:8,col:8}]; 
/*添加圖片*/ 
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.init(); 
/*淡出效果，效果可以自己做，自己添加，這個(gè)只是比較經(jīng)典的（效果要接受一個(gè)參數(shù)，就是每一個(gè)小div，我們對(duì)它進(jìn)行處理）*/ 
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) 

} ; 


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

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