A javascript image reading component

That is, the effect of image switching is customizable. Through this component, we can customize a lot of effects, but this is not final yet. Now let's try it first.
Copy codeThe Code is as follows:
Var pola = new PhotoLook ("contain"); // create a PhotoLook object

This is the statement for instantiating This component. cantain is the ID of the div you specify, which is defined by the component owner.
Copy codeThe Code is as follows:
/* Set the PhotoLook size */
Pola. width = 240;
Pola. height = 320;
/* Add an image */
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. add ("http://img.overpic.net/thumbs/ B /7/w/xb7wghi7ivyxmbz7tb72e_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/ I /m/f/ximfw3938obxo33qqjg_s.jpg ");
Pola. init ();

Define the component size, use the provided add method to add images, and then call init to initialize the image.
Copy codeThe Code is as follows:
/* Fade-out effect. The effect can be done by yourself and added by yourself. This is just a classic one (the effect must accept a parameter, that is, every small div, which we can process )*/
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)

};

Add a fade-out effect. Note that this effect is not certain. We can make other effects ourselves and then call addswitchMethod to add them to the component object:
/* Add fade-out effect (you can add many effects and set the sequence of effects )*/
Pola. addswitchMethod (fadeOut, "show ");

The following figure shows the effect matrix configuration of the example below.
Copy codeThe Code is as follows:
/* Add an effect matrix. Check the distribution of matrix numbers to see the approximate result. If the number is small, the effect will first occur */
Pola. addswitchTable ([[,], [,], [,]);
Pola. addswitchTable ([[1, 2, 2], [2, 1, 2], [1, 2], [2, 1, 2]);
Pola. addswitchTable ([[1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4]);
Pola. addswitchTable ([[,], [,], [,], [,]);
Pola. addswitchTable ([[,], [,], [,]);
Pola. addswitchTable ([[1, 2, 3, 1], [3, 4, 2], [2, 4, 3], [1, 3, 2, 1]);
Pola. addswitchTable ([,], [,], [,]);
Pola. addswitchTable ([[,], [,], [,], []);

At first glance, you should know the relationship between the effect matrix and the switching effect.
Let's take a look at an example. By the way, because images are taken directly from the Internet and are not processed, the first round of switching will feel a little like a card, but when all of its images are buffered, the complete effect will be displayed.
In the future, the pre-loading function will be added to greatly reduce the impact of this situation (these images are too large, so I do not know how to upload images in the blog Park, or I have no idea how to upload them at all)
You can only view the album after you click the "initialize" button...
Complete configuration code
Copy codeThe Code is as follows:
Var pola = new PhotoLook ("contain"); // create a PhotoLook object
/* Set the PhotoLook size */
Pola. width = 240;
Pola. height = 320;
/* Add an image */
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. add ("http://img.overpic.net/thumbs/ B /7/w/xb7wghi7ivyxmbz7tb72e_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg ");
Pola. add ("http://img.overpic.net/thumbs/ I /m/f/ximfw3938obxo33qqjg_s.jpg ");
Pola. init ();
/* Fade-out effect. The effect can be done by yourself and added by yourself. This is just a classic one (the effect must accept a parameter, that is, every small div, which we can process )*/
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)

};


/* Add fade-out effect (you can add many effects and set the sequence of effects )*/
Pola. addswitchMethod (fadeOut, "show ");

/* Add an effect matrix. Check the distribution of matrix numbers to see the approximate result. If the number is small, the effect will first occur */
Pola. addswitchTable ([1, 2, 3, 4],
[2, 3, 4, 5],
[3, 4, 5, 6],
[4, 5, 6, 7]);
Pola. addswitchTable ([1, 2, 2],
[2, 1, 2, 1],
[1, 2, 2],
[2, 1, 2, 1]);
Pola. addswitchTable ([1, 2, 3, 4],
[1, 2, 3, 4],
[1, 2, 3, 4],
[1, 2, 3, 4]);
Pola. addswitchTable ([1, 2, 3, 4],
[,],
[11,16, 15,6],
[10, 9, 8, 7]);
Pola. addswitchTable ([1, 2, 3, 4],
[8, 7, 6, 5],
[5, 6, 7, 8],
[,]);
Pola. addswitchTable ([1, 2, 3, 1],
[3, 4, 4, 2],
[2, 4, 3],
[1, 3, 2, 1]);
Pola. addswitchTable ([1, 1, 4, 4],
[1, 1, 4, 4],
[3, 3, 2, 2],
[3, 3, 2, 2]);
Pola. addswitchTable ([1, 10, 4, 14],
[9, 3, 13, 7],
[2, 12, 6, 16],
[11,5, 15,8]);

/* Add an event handler to each button. This part is not configured with PhotoLook */
Var buttonautoPlay = document. getElementById ("autoPlay ");
ButtonautoPlay. onclick = function (){
Pola. autoPlay (4000 );
}
Var buttonstopAutoPlay = document. getElementById ("stopAutoPlay ");
ButtonstopAutoPlay. onclick = function (){
Pola. stopAutoPlay ();
}
Var buttonturn = document. getElementById ("turn ");
Var textBox = document. getElementById ("Text1 ");
Buttonturn. onclick = function (){
Pola. goTo (parseInt (textBox. value ));
}
Var buttonprevious = document. getElementById ("previous ");
Buttonprevious. onclick = function (){
Pola. previous ();
}
Var buttonnext = document. getElementById ("next ");
Buttonnext. onclick = function (){
Pola. next ();
}

Download component code