Step-by-Step to teach you to write fade with annotated picture Carousel (ii) _javascript tips

Take the next one and now proceed to the second part.
Before you begin, talk about the optimization problem that you mentioned earlier about putting all functions in a closed package. As mentioned in the previous article, because we want to invoke only init at initialization time, we can only write init to the closure and other functional functions as the prototype inheritance method of Init. So the code in the previous text can be rewritten like this:

Copy Code code 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): Picture List parent tag id;auto (optional): Auto run time; index (optional): The start of the run picture sequence number
var wp = h$ (options.id),//Get Picture List parent element
UL = h$$ (' ul ', WP) [0],//Get
Li = This.li = h$$ (' li ', ul);
THIS.A = Options.auto?options.auto:2; Auto Run interval
This.index = options.position?options.position:0; Number of pictures to start running (starting from 0)
THIS.L = Li.length;
this.cur = this.z = 0; The currently displayed picture ordinal &&z-index variable
This.pos (This.index); Transform 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 -1,1 represent running to the next,-1 represents running to the previous one
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 (note the use of the ternary selector)
This.pos (m); To change to the previous one or the next one
},
Pos:function (i) {
Clearinterval (THIS.LI.A);
this.z++;
This.li[i].style.zindex = this.z; Each time let the next picture Z-index plus a
This.cur = i; Bind the correct number of the currently displayed picture
This.auto (); Run automatically
}
}
return {Init:init}
}();

But this is actually a problem, do not know that you have found no, if so rewritten, in the auto function can not call the ' Hongru.fader.move () ', which is not defined, that some people will say, since it is the prototype of Init inheritance, that call ' Hongru. Fader.init.move () ' Is that right? In fact, I have discussed this issue in previous articles http://www.cnblogs.com/hongru/archive/2010/10/09/1846636.html; Init does not have access to its prototype until it is instantiated, so we should pay attention to two questions in doing so.
One is initialized to instantiate the init with the new keyword.
The other is to invoke the prototype method inside the code, also through the object we instantiate, for example, such as when we initialize the above code.

Copy Code code as follows:

var newfader = new Hongru.fader.init ({//This new is important
ID: ' Fader '
});

If the method we want to call Init in the code is invoked through our newly created instantiated object Newfader, such as calling the Init Move method in the Auto function above, call ' Newfader.move () directly.
However, there is a small problem, that is, you must ensure that the instantiated variable names and code calls in the same, then if I changed the name of my initialization object, such as using NewFader1, then I have to change the source code, this is certainly not, so there is a small trick, is in the init inside more than a parameter, In doing initialization, let the variable name and parameters consistent, and then in the source code we use parameters to call. The problem is solved satisfactorily.
(PS: The reason the new function is used in the code is also because it breaks the scope chain, which is one of the conditions that ensures that we can structure our code like this.) ）
In summary: The previous code should be optimized like this:

Copy Code code 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): Picture List parent tag id;auto (optional): Auto run time; index (optional): Start of the run picture sequence number
var wp = h$ (options.id),//Get Picture List parent element
UL = h$$ (' ul ', WP) [0],//Get
Li = This.li = h$$ (' li ', ul);
THIS.A = Options.auto?options.auto:2; Auto Run interval
This.index = options.position?options.position:0; Number of pictures to start running (starting from 0)
THIS.L = Li.length;
this.cur = this.z = 0; The currently displayed picture ordinal &&z-index variable
This.pos (This.index); Transform 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 -1,1 represent running to the next,-1 represents running to the previous one
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 (note the use of the ternary selector)
This.pos (m); To change to the previous one or the next one
},
Pos:function (i) {
Clearinterval (THIS.LI.A);
this.z++;
This.li[i].style.zindex = this.z; Each time let the next picture Z-index plus a
This.cur = i; Bind the correct number of the currently displayed picture
This.auto (); Run automatically
}
}
return {Init:init}
}();

This should be the case when initializing:

Copy Code code as follows:

var fader = new Hongru.fader.init (' fader ', {//Guaranteed first parameter and variable name consistent
ID: ' Fader '
});

Well, that's the end of the code optimization scenario. Here is the second part of the implementation of the effect: fade effect
In fact, with the above good code structure and logic, add fade effect is relatively easy, the idea is very simple, before the change to make the picture transparent, and then through the timer to let transparency gradually increase. It's just that there are a few boundaries that are more important to judge. At the same time, transparency changes in IE and non IE to note the use of different CSS properties.
The core code changes to the following two paragraphs, one is to increase the transparency gradient function fade (), the other is in the POS () in advance to the image transparent--> and then start execution fade ()
Add a code snippet to the POS ():

Copy Code code as follows:

if (this.li[i].o>=100) {//Photo transparency is made transparent before the picture 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 function fade ()

Copy Code code as follows:

Fade:function (i) {
if (this.li[i].o>=100) {
Clearinterval (THIS.LI[I].F); Clear the timer if the transparency changes complete
The IF (!THIS.LI.A) {///ensures that all timers are cleared before they start running automatically. Otherwise it will cause a controller when the click too fast, the timer did not have time to clear the next change, the function of chaos
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+ ') ';
}
}

Well, that's simple. But there is one thing to remember is that at the beginning of the POS () call must remember to clear the last timer!!
Below the entire source code are posted again:

Copy Code code 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): Picture List parent tag id;auto (optional): Auto run time; index (optional): Start of the run picture sequence number
var wp = h$ (options.id),//Get Picture List parent element
UL = h$$ (' ul ', WP) [0],//Get
Li = This.li = h$$ (' li ', ul);
THIS.A = Options.auto?options.auto:2; Auto Run interval
This.index = options.position?options.position:0; Number of pictures to start running (starting from 0)
THIS.L = Li.length;
this.cur = this.z = 0; The currently displayed picture ordinal &&z-index variable
* = = Add fade function ==*/
for (Var i=0;i<this.l;i++) {
THIS.LI[I].O = 100; Set a transparency change for each picture
this.li[i].style.opacity = this.li[i].o/100; Non ie with opacity can
This.li[i].style.filter = ' alpha (opacity= ' +this.li[i].o+ ') '; IE with filters
}
This.pos (This.index); Transform 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 -1,1 represent running to the next,-1 represents running to the previous one
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 (note the use of the ternary selector)
This.pos (m); To change to the previous one or the next one
},
Pos:function (i) {
Clearinterval (THIS.LI.A); Clear Automatic Transform Timer
Clearinterval (THIS.LI[I].F); Clear Fade effect Timer
this.z++;
This.li[i].style.zindex = this.z; Each time let the next picture Z-index plus a
This.cur = i; Bind the correct number of the currently displayed picture
THIS.LI.A = false; To make a mark, use the following to indicate that the purge timer is complete
This.auto (); Run automatically
if (this.li[i].o>=100) {//Photo transparency is made transparent before the picture 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); Clear the timer if the transparency changes complete
The IF (!THIS.LI.A) {///ensures that all timers are cleared before they start running automatically. Otherwise it will cause a controller when the click too fast, the timer did not have time to clear the next change, the function of chaos
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}
}();

You should pay attention to the notes I write, some of which are more critical.
Let's see how it works:

<! Doctype html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title>step2</title> <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> <script type= "Text/javascript" ><!--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): Picture List parent tag id;auto (optional): Auto run time; index (optional): Start running picture serial number var WP = h$ (options.id),//Get Picture List the parent element ul = h$$ (' ul ', WP) [0],//Get Li = This.li = h$$ (' li ', ul); THIS.A = Options.auto?options.auto:2; Automatic run interval this.index = options.position?options.position:0; The number of the picture that started running (starting from 0) THIS.L = Li.length; this.cur = this.z = 0; Currently displayed picture ordinal &&z-index variable/* = Add fade function ==*/for (Var i=0;i<this.l;i++) {this.li[i].o = 100; Set a transparency change for each picture this.li[i].style.opacity = this.li[i].o/100; Non-IE with opacity can this.li[i].style.filter = ' alpha (opacity= ' +this.li[i].o+ ') '; IE with filter} this.pos (This.index); Transform 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 -1,1 are run to the next,-1 represents the run to the previous var n = this.cur+i; var m = i==1?n==this.l?0:n:n<0?this.l-1:n; The next or previous number (note the use of the ternary selector) This.pos (m); Transform to previous or next}, Pos:function (i) {clearinterval (THIS.LI.A);//clear Automatic Transform Timer clearinterval (THIS.LI[I].F);//clear fade effect timer thi s.z++; This.li[i].style.zindex = this.z; Each time let the next picture z-index plus one this.cur = i; Binds the correct ordinal number THIS.LI.A = False of the currently displayed picture; To make a mark, use the following to indicate that the purge timer has been completed//this.auto (); Auto Run if (this.li[i].o>=100) {//////////////////////////////THIS.LI[I].O 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 transparency changes complete, clear timer if (!THIS.LI.A) {// Make sure that all timers are cleared before they start running automatically. Otherwise it will lead to a controller when the click too fast, the timer did not have time to clear the beginning of the next change, the function of Chaos 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}} (); --></script> </pead> <body> <div id= "Fader" > <ul> <li></li> &LT;LI&G t;</li> <li></li> <li></li> <li></li> </ul> </div> <script Type= "Text/javascript" ><!--var fader = new Hongru.fader.init (' fader ', {ID: ' fader '}); --></script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

It may be noticed that the fade here is only a title, in fact, only fade in effect, but not in the way, the effect is basically the same as fading out, and even if you want to fade out function will only need to change two words. Oh
This is the end of the section, and the next section is added to the controller.