JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:属性speed:设置图片切换的速度width:组件的宽度height:组件的高度cellStructures:可设置效果矩阵的行列例如{ro...

属性

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]]);

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类