属性
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