JS 画像閲覧コンポーネント PhotoLook_Image 特殊効果のパブリック属性メソッドと高度なサンプル コードの紹介

属性
speed: 画像の切り替え速度を設定します
width: コンポーネントの幅
height: コンポーネントの高さ
cellStructures: エフェクトの行と列たとえば、{row:8,col:8｝この行と列は、エフェクト行列 switchTable
Method
init() の行と行に対応する必要があることに注意してください。 ): 初期化
addswitchTable(switchTable): エフェクトマトリックスの追加
add( url): 画像の追加
addedswitchMethod (func, type): 切り替え方法の追加(フェードアウト、スライドアウトなど)、関数はまだ完了していません。「show」の値は 1 つだけ入力できます。
autoPlay (time): 自動再生、自動再生の速度は速度以上になります。
stopAutoPlay(): 自動再生を停止します
goTo(): 特定の画像にジャンプします。非自動再生状態である必要があります。
previous(): 前のページ
next(): 次のページ

の例と比較します。前の例 (JS 画像閲覧コンポーネントの紹介) と異なり、この例では cellStructures を使用してデフォルトの行列の行と列を変更し、画像の切り替え数 (1、2、3、4、5、6、GO) を表示します。今回の設定コード

コードをコピー コードは次のとおりです。

var pola=new PhotoLook("contain");//PhotoLook オブジェクトの作成
/*PhotoLook サイズ設定*/
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();
/*フェードアウト効果、効果はカスタマイズ可能 自分で追加してください、これは単なる古典的なものです (効果には必要があります)それぞれの小さな 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{
setTimeout(hide,100);
}
}
Hide();
})(div,0)

} ;


/*フェードアウト効果を追加します (多くの効果を追加し、効果が表示される順序を設定できます) +/
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]]);