属性 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正则表达式中参数g(全局)的作用

我们详细描述： 1）对于表达式对象的ｅｘｅｃ方法，不加入ｇ，则只返回第一个匹配，无论执行多少次均是如此，如果加入ｇ，则第一次执行也返回第一个匹配，再执行第二个匹配，依次类推。例如： 复制代码 代码如下: >>>详细阅读

本文标题：JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码

地址：http://www.17bianji.com/kaifa2/JS/25446.html

 1/2    1