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. So the previous article Code You can actually rewrite it like this: Copy code Code: 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: 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 usedArticleI have discussed this issue,
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 code Code: 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: 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'
});

well, the code optimization solution ends here. The following is the implementation of the second part of the effect: fade-in and fade-out effect
In fact, with the above good code structure and logic, it is easier to add the fade-in and fade-out effect, and 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 core code is modified in the following two sections. One is to add the transparency gradient function fade (), and the other is in POS () first, you need to make the image transparent --> and then start to execute fade ()
pos () to add a code segment: copy Code the 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) ';
}< br> 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 code Code: 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: 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: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <style type =" text/CSS "> <! -- # Fader {position: relative; overflow: hidden; Height: 300px; width: 500px }# Fader Li {position: absolute; left: 0; top: 0;} ul, li {list-style: none; margin: 0; padding: 0} IMG {display: block ;} --> </style> <p> <ul> <li> </LI> <li> </LI> </ul> <p>