Step by step teach you to write the image carousel plug-in that fades in and out with annotations (2)

Next to the previous article, perform the second part.
Before getting started, let's talk about the optimization problem mentioned above about writing all functions in a closure. As mentioned above, we only need to call init during initialization, so we can only write init into the closure, and other functional functions can be called as the init prototype inheritance method. Therefore, the preceding code can be rewritten as follows:
Copy codeThe Code is as follows:
Var Hongru = {};
Function H $ (id) {return document. getElementById (id )}
Function H $ (c, p) {return p. getElementsByTagName (c )}
Hongru. fader = function (){
Function init (options) {// options parameter: id (required): image list parent tag id; auto (optional): automatic running time; index (optional ): the serial number of the running image.
Var wp = H $ (options. id), // obtain the parent element of the image list
Ul = H $ ('ul ', wp) [0], // get
Li = this. li = H $ ('lil', ul );
This. a = options. auto? Options. auto: 2; // automatic run Interval
This. index = options. position? Options. position: 0; // the serial number of the image that starts running (starting from 0)
This. l = li. length;
This. cur = this. z = 0; // The number of the currently displayed Image & z-index variable
This. pos (this. index); // Transformation Function
}
Init. prototype = {
Auto: function (){
This. li. a = setInterval (new Function ('hongru. fader. move (1) '), this. a * 1000 );
},
Move: function (I) {// parameter I has two options: 1 and-represent running to the next, and-1 represent running to the previous
Var n = this. cur + I;
Var m = I = 1? N = this. l? 0: n <0? This L-1: n; // the sequence number of the next or previous one (note the use of the ternary selector)
This. pos (m); // transform to the previous or next
},
Pos: function (I ){
ClearInterval (this. li. );
This. z ++;
This. li [I]. style. zIndex = this. z; // Add one to the z-index of the next image each time.
This. cur = I; // The correct serial number of the currently displayed image.
This. auto (); // automatically run
}
}
Return {init: init}
}();

But this is actually a problem. I don't know if you find it. If you rewrite it like this, you can no longer call 'hongru in the auto function. fader. move () '. This is not defined. Some people will say that since it is an init prototype inheritance, 'hongru will be called. fader. init. move () 'Isn't that correct? Actually, this is not true. I have discussed this issue in my previous articles,
One is to use the new keyword to instantiate init during initialization.
The other one is to call the prototype method of the Code through the instantiated object. For example, we should do this when initializing the code above.
Copy codeThe Code is as follows:
Var newFader = new Hongru. fader. init ({// This new is very important
Id: 'fader'
});

If we want to call the init method in the code, we need to call it through the newly created instantiated object newFader. For example, if we want to call the init move method in the above auto function, directly call 'newfader. move.
However, there is also a small problem, that is, to ensure that the name of the instantiated variable is consistent with that called in the Code, if I change the name of my initialization object, such as using newFader1, so I have to change the source code. This is definitely not feasible. So I have a trick: upload another parameter in init and make the variable name and parameter consistent during initialization, in the source code, we can call it through parameters. In this way, the problem is solved successfully.
(Ps: the reason why the new Function is used in the Code is also because it can break through the scope chain, which is also one of the conditions to ensure that we can structure our code in this way .)
To sum up, the previous Code should be optimized as follows:
Copy codeThe Code is as follows:
Var Hongru = {};
Function H $ (id) {return document. getElementById (id )}
Function H $ (c, p) {return p. getElementsByTagName (c )}
Hongru. fader = function (){
Function init (anthor, options) {this. anthor = anthor; this. init (options );}
Init. prototype = {
Init: function (options) {// options parameter: id (required): parent tag id of the image list; auto (optional): automatic running time; index (optional ): the serial number of the running image.
Var wp = H $ (options. id), // obtain the parent element of the image list
Ul = H $ ('ul ', wp) [0], // get
Li = this. li = H $ ('lil', ul );
This. a = options. auto? Options. auto: 2; // automatic run Interval
This. index = options. position? Options. position: 0; // the serial number of the image that starts running (starting from 0)
This. l = li. length;
This. cur = this. z = 0; // The number of the currently displayed Image & z-index variable
This. pos (this. index); // Transformation Function
},
Auto: function (){
This. li. a = setInterval (new Function (this. anthor + '. move (1)'), this. a * 1000 );
},
Move: function (I) {// parameter I has two options: 1 and-represent running to the next, and-1 represent running to the previous
Var n = this. cur + I;
Var m = I = 1? N = this. l? 0: n <0? This L-1: n; // the sequence number of the next or previous one (note the use of the ternary selector)
This. pos (m); // transform to the previous or next
},
Pos: function (I ){
ClearInterval (this. li. );
This. z ++;
This. li [I]. style. zIndex = this. z; // Add one to the z-index of the next image each time.
This. cur = I; // The correct serial number of the currently displayed image.
This. auto (); // automatically run
}
}
Return {init: init}
}();

The initialization should be like this:
Copy codeThe Code is as follows:
Var fader = new Hongru. fader. init ('fader ', {// ensure that the first parameter is consistent with the variable name
Id: 'fader'
});

Now, the code optimization solution is over. The following is the implementation of the second part: the effect of fade in and out
In fact, with the above good code structure and logic, it is easier to add fade-in and fade-out effects. The idea is very simple. Make the image transparent before the change, and then gradually increase the transparency through the timer. However, it is important to have several boundary judgments. At the same time, when the transparency changes, you must use different css attributes under ie and non-ie.
The changes to the core Code are as follows: one is to add the transparency gradient function fade (), and the other is in pos () the image must be transparent first --> and then start to execute fade ()
Add a code segment in pos:
Copy codeThe Code is as follows:
If (this. li [I]. o> = 100) {// set the image transparency to transparent before the image fades in.
This. li [I]. o = 0;
This. li [I]. style. opacity = 0;
This. li [I]. style. filter = 'Alpha (opacity = 0 )';
}
This. li [I]. f = setInterval (new Function (this. anthor + '. fade (' + I + '), 20 );

Then add a function fade ()
Copy codeThe Code is as follows:
Fade: function (I ){
If (this. li [I]. o> = 100 ){
ClearInterval (this. li [I]. f); // If the transparency changes, clear the timer.
If (! This. li. a) {// make sure that all timers are cleared before starting automatic operation. Otherwise, if a controller is clicked too quickly, the timer starts the next change before it can be cleared, and the function becomes messy.
This. auto ();
}
}
Else {// transparency change
This. li [I]. o + = 5;
This. li [I]. style. opacity = this. li [I]. o/100;
This. li [I]. style. filter = 'Alpha (opacity = '+ this. li [I]. o + ')';
}
}

Okay, that's easy. However, remember that the last Timer must be cleared at the beginning of the pos () call !!
Next, paste the entire source code again:
Copy codeThe Code is as follows:
Var Hongru = {};
Function H $ (id) {return document. getElementById (id )}
Function H $ (c, p) {return p. getElementsByTagName (c )}
Hongru. fader = function (){
Function init (anthor, options) {this. anthor = anthor; this. init (options );}
Init. prototype = {
Init: function (options) {// options parameter: id (required): parent tag id of the image list; auto (optional): automatic running time; index (optional ): the serial number of the running image.
Var wp = H $ (options. id), // obtain the parent element of the image list
Ul = H $ ('ul ', wp) [0], // get
Li = this. li = H $ ('lil', ul );
This. a = options. auto? Options. auto: 2; // automatic run Interval
This. index = options. position? Options. position: 0; // the serial number of the image that starts running (starting from 0)
This. l = li. length;
This. cur = this. z = 0; // The number of the currently displayed Image & z-index variable
/* = Added the fade in/out function = */
For (var I = 0; I <this. l; I ++ ){
This. li [I]. o = 100; // set a transparency variation for each image.
This. li [I]. style. opacity = this. li [I]. o/100; // non-IE opacity
This. li [I]. style. filter = 'Alpha (opacity = '+ this. li [I]. o +') '; // use a filter for IE
}
This. pos (this. index); // Transformation Function
},
Auto: function (){
This. li. a = setInterval (new Function (this. anthor + '. move (1)'), this. a * 1000 );
},
Move: function (I) {// parameter I has two options: 1 and-represent running to the next, and-1 represent running to the previous
Var n = this. cur + I;
Var m = I = 1? N = this. l? 0: n <0? This L-1: n; // the sequence number of the next or previous one (note the use of the ternary selector)
This. pos (m); // transform to the previous or next
},
Pos: function (I ){
ClearInterval (this. li. a); // clear the automatic conversion Timer
ClearInterval (this. li [I]. f); // clears the fade-in and fade-out effect Timer
This. z ++;
This. li [I]. style. zIndex = this. z; // Add one to the z-index of the next image each time.
This. cur = I; // The correct serial number of the currently displayed image.
This. li. a = false; // mark it. It is used below to indicate that the cleanup timer has been completed.
// This. auto (); // automatically run
If (this. li [I]. o> = 100) {// set the image transparency to transparent before the image fades in.
This. li [I]. o = 0;
This. li [I]. style. opacity = 0;
This. li [I]. style. filter = 'Alpha (opacity = 0 )';
}
This. li [I]. f = setInterval (new Function (this. anthor + '. fade (' + I + '), 20 );
},
Fade: function (I ){
If (this. li [I]. o> = 100 ){
ClearInterval (this. li [I]. f); // If the transparency changes, clear the timer.
If (! This. li. a) {// make sure that all timers are cleared before starting automatic operation. Otherwise, if a controller is clicked too quickly, the timer starts the next change before it can be cleared, and the function becomes messy.
This. auto ();
}
}
Else {
This. li [I]. o + = 5;
This. li [I]. style. opacity = this. li [I]. o/100;
This. li [I]. style. filter = 'Alpha (opacity = '+ this. li [I]. o + ')';
}
}
}
Return {init: init}
}();

Note that some of the notes I have written are critical.
Let's take a look at the running effect:
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = UTF-8 "/> <title> step2 </title> <style type =" text/css "> </style> </pead> <body> <ul> <li> </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Some people may have noticed that the fade-in and fade-out here is only a title. In fact, there is only a fade-in effect, but it is not in the way. The effect is basically the same as that of fade-out, in addition, you only need to change one sentence even if you want to fade out the feature. Haha
This part ends here, and the next part will be added to the Controller.