Introduction to public attribute methods and advanced example code of JS image browsing component PhotoLook_Image special effects

Attributes
speed: Set the speed of image switching
width: The width of the component
height: The height of the component
cellStructures: The rows and columns of the effect matrix can be set. For example, {row:8, col:8｝Note that this row and column should correspond to the row and row of the effect matrix switchTable
Method
init(): Initialization
addswitchTable(switchTable): Add effect matrix
add( url): Add image
addswitchMethod (func, type): Add switching method (such as fade out, slide out), the function is not complete now, type can only fill in one value of "show"
autoPlay (time): automatic play , the speed of automatic playback will not be less than speed
stopAutoPlay(): Stop automatic playback
goTo(): ​​Jump to a certain picture, it must be in the non-autoplay state
previous(): Previous Page
next(): Next page

example. Compared with the previous example (introducing a JS image browsing component), this example uses cellStructures to change the rows and columns of the default matrix and displays the count. (1, 2, 3, 4, 5, 6, GO) image switching
Configuration code for this time

Copy code The code is as follows:

var pola=new PhotoLook("contain");//Create PhotoLook object
/*PhotoLook size setting*/
pola.width=240 ;
pola.height=320;
pola.cellStructures=[{row:8,col:8}];
/*Add pictures*/
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();
/*Fade out effect, the effect can be customized Do it, add it yourself, this is just a classic one (the effect needs to accept a parameter, which is each small div, we process it) */
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)

} ;


/*Add fade-out effect (you can add many effects and set the order in which the effects appear) +/
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]]);