A few days ago on the Blueidea saw a fade with the annotation of the picture carousel effect Http://bbs.blueidea.com/thread-2911266-1-1.html Read the post author's code, although the effect reached, but there are several places I have different views:
1. The author's idea was to hide the real picture list and create a new div to make an alternating change by constantly push the current picture into the innerhtml of that Div. Although some new ideas, but from the operational logic of the target effect, by changing the Z-index value of the list elements to achieve the alternate transformation in fact more in line with the original intention of the effect logic.
2. Although the author of the code to do a certain degree of encapsulation, but the package is not very good, in the effect of the configurable does not do very well, thus, this can only be an effect, but not as a configurable plug-in.
PS: The above view is purely factual, without any suspicion of the author's skill. and different people have different views. Purely personal opinion)
So, I also took time to write a similar effect, to do a certain degree of encapsulation, although only a small number of lightweight native plug-ins, but still share out, and do step-by-step tutorials, I hope to have the need for friends some help. Let's go to the final effect chart:
OK, let ' s go! Let's start with our first part!
The first part of the goals we are going to achieve are:
1. Establish a large framework to achieve the logic of transformation, while establishing a good code structure, for the future function expansion lay a good foundation. (A good start is half the success!) ）
2. The first part is to achieve the effect of automatic picture switching (only this one function).
First of all, to have a clear idea, to achieve this effect, we must call an initialization function init ()-->init () to start the transformation of the first picture to the next one, may be tentatively this function is a POS ()--> to realize automatic alternating transformation, Then definitely need an automatic transformation function function Auto ()-->auto () The automatic transformation should have two directions, forward and backward, then this function can also be implemented by a function, the tentative move ()-->move () is specified up or down a transformation, Then you can return to our transformation function pos ()!
So, we have set up a complete and feasible logic system. Based on the above logic, we use the code structure to represent the following:
Copy Code code as follows:
var hongru={};
Hongru.fader = function () {
return{
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
This.pos (This.index); Transform function
},
Auto:function () {
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
This.pos (m); To change to the previous one or the next one
},
Pos:function (i) {
This.auto (); Run automatically
}
}
}();
These are just my personal coding habits: The function blocks are written in a closure, reduce naming conflicts, avoid global variable pollution. (But there is a problem, all functions are in the closure, it is likely to lead to ie memory leaks, so there is another better way: only the initialization function into the closure, other functions through the prototype built.) This also avoids naming conflicts and global variable pollution, while also reducing memory pressure. This optimization plan will be described in the next section.
Well, the big frame came out, and we actually did half of it, and the following is based on the specific function of each module. Because the DOM selector gives us the most commonly used functionality, two global functions are predefined here
Copy Code code as follows:
function h$ (ID) {return document.getElementById (ID)}
function h$$ (c,p) {return p.getelementsbytagname (c)}
I believe we all understand.
The following is the disassembly of each module function:
Init module:
Copy Code code as follows:
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
Copy Code code as follows:
Auto:function () {
THIS.LI.A = setinterval (New Function (' Hongru.fader.move (1) '), this.a*1000);
},
Move
Copy Code code as follows:
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:
Copy Code code as follows:
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
}
OK, the total source code is this:
<! Doctype html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title>step1</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 () {return{init:function (options) {//options parameter: ID (required): Picture List parent tag id;auto (optional): Auto run time; index (optional): Start run picture ordinal 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; Automatic run interval this.index = options.position?options.position:0; The number of the image 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 (' Hongru.fader.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 the previous or 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 one this.cur = i; Binds the correct ordinal number of the currently displayed picture This.auto (); Auto Run}}} (); --></script> </pead> <body> <div id= "Fader" > <ul> <li></li> <LI&G t;</li> <li></li> <li></li> <li></li> </ul> </div> <script Type= "Text/javascript" ><!--Hongru.fader.init ({id: ' fader '}); --></script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Well, this is the end of the section, the next section will increase the fade effect and just mentioned the best to avoid the closure caused by the memory leakage of the optimization scheme!
