JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例
这次接着来介绍PhotoLook（前文介绍的组件）现在可供使用的属性和方法，接着展示一个叫前文不一样的例子
属性
speed ：设置图片切换的速度
width：组件的宽度
height：组件的高度
cellStructures：可设置效果矩阵的行列例如｛row:8,col:8｝注意，这个行列要和效果矩阵switchTable的行列对应
方法
init（）：初始化
addswitchTable（switchTable）：添加效果矩阵
add（url）：添加图片
addswitchMethod（func,type）：添加切换方法（例如淡出，滑出），现在功能未完整，type只能填"show"一个值
autoPlay（time）：自动播放，自动播放的速度不会小于speed
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
<
1
)
{
setTimeout(hide,
100
);
}
}
hide();
})(div,
0
)
} ;
/*
添加淡出效果（可以添加很多效果，并设定效果出现的顺序）
*/
pola.addswitchMethod(fadeOut,
"
show
"
);
/*
添加效果矩阵，仔细看矩阵数字的分布就可以知道哥大概了，数字小的会先发生效果
*/
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
]]);