Teach you step by step how to write a fade-in and fade-out picture carousel plug-in with annotations (1)

A few days ago, I saw a fade-in and fade-out annotated picture carousel effect on blueIdea http://bbs.blueidea.com/thread-2911266-1-1.html. I looked at the code of the author of the post. Although the effect was achieved, But there are a few places where I have different opinions:

1. The author’s idea is to hide the real image list, create a new div, and continuously push the current image into the innerHTML of that div. Let’s make alternations one by one. Although the idea is somewhat new, from the perspective of the operation logic of the target effect, alternating transformation by changing the z-index value of the list element is actually more in line with the original intention of this effect logic.

2. Although the author has encapsulated the code to a certain extent, the encapsulation is still not very good, and the effect is not configurable very well. Therefore, this can only be one effect. , and not as a configurable plugin.

(ps: The above opinions are purely based on the matter, and there is no doubt about the author's skill. Different people have different opinions. It is purely a personal opinion)

Therefore, I also took the time to write it myself It has a similar effect and has been encapsulated to a certain extent. Although it can only be regarded as a lightweight native plug-in, I still share it and provide a step-by-step tutorial, hoping to give some help to friends in need. Let’s take a look at the final renderings first:
Teach you step by step how to write a fade-in and fade-out picture carousel plug-in with annotations (1)_javascript skills
Okay, let’s go! Let’s start our first part!
The goals we want to achieve in the first part are:
1. Establish a large framework to implement the transformation logic, and establish a good code structure to lay a solid foundation for future function expansion. (A good start is half the battle!)
2. The effect to be achieved in the first part is automatic switching of pictures (only this function).
First of all, we must have a clear idea. To achieve this effect, we must call an initialization function init()-->init() to start transforming the first picture to the next one. We might as well tentatively decide on this function The function is pos()-->To realize automatic alternating transformation, you definitely need an automatic transformation function function auto()-->The automatic transformation in auto() should have two directions, forward and backward, then We can also implement this function through a function. Tentatively, move()-->move() specifies an upward or downward transformation, then we can return to our transformation function pos()!
Then, we have established a complete and feasible logical system. Based on the above logic, we use the code structure to express it as follows:

Copy code The code is as follows:

 
 var Hongru={}; 
Hongru.fader = function(){ 
return{ 
init:function(options){ //options parameters: id (required): picture list parent tag id; auto (optional): automatic running time; index (optional): the serial number of the image that started running 
this.pos(this.index); //Transformation function 
}, 
auto:function() { 
setInterval(new Function('Hongru.fader.move(1)'), this.a*1000); 
}, 
move:function(i){//There are two types of parameter i Select, 1 and -1, 1 means running to the next picture, -1 means running to the previous picture 
this.pos(m); //Transform to the previous or next picture 
}, 
pos:function(i){ 
this.auto(); //Automatically run 
} 
} 
}(); 

The above is just me Good coding habits: write all function blocks in a closure to reduce naming conflicts and avoid global variable pollution. (But there is a problem with this. All functions are in closures, which may cause IE memory leaks, so there is another better way: only write the initialization function into the closure, and other functions are built in through the prototype. This can also avoid naming conflicts and global variable pollution, and at the same time reduce memory pressure. This optimization plan will be explained in the next section)
Okay, now that the big framework is out, we are actually half successful. Let’s follow the steps below. The specific functions of each module are enriched. Since the DOM selector is our most commonly used function, two global functions are predefined here

Copy code The code is as follows:

 
function H$(id){return document.getElementById(id)} 
function H$$(c,p){return p.getElementsByTagName(c)} 

I believe everyone understands.
The following is the disassembly of each module function:
init module:

Copy the code The code is as follows:

 
init:function(options){ //options parameters: id (required): picture list parent tag id; auto (optional): automatic running time; index (optional): the start of the run Image serial number
var wp = H$(options.id), // Get the parent element of the image list
ul = H$$('ul',wp)[0], // Get
li = this.li = H$$('li',ul); 
this.a = options.auto?options.auto:2; //Automatic running interval
this.index = options.position?options. position:0; //The serial number of the picture to start running (starting from 0) 
this.l = li.length; 
this.cur = this.z = 0; //The serial number of the currently displayed picture&&z-index Variable 
this.pos(this.index); //Transformation function 
}, 

auto:

Copy code The code is as follows:

 
auto:function(){ 
this.li.a = setInterval(new Function('Hongru.fader.move(1)) '),this.a*1000); 
}, 

move:

Copy code The code is as follows:

 
move:function(i){//There are two options for parameter i, 1 and -1, 1 means running to the next one, -1 means running to the previous one Zhang
var n = this.cur i; 
var m = i==1?n==this.l?0:n:nthis.pos(m); //Convert to the previous or next picture
}, 

pos:

Copy code The code is as follows:

 
pos:function(i){ 
clearInterval(this.li.a); 
this.z ; 
this.li[i].style.zIndex = this.z; //Increase the z-index of the next picture by one each time
this.cur = i; //Bind the correct serial number of the currently displayed image 
this.auto(); //Automatically run 
} 

Okay, the total source code It goes like this:

[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute it
] Well, this part ends End of it, the next part will add the fade-in and fade-out effect and the optimization plan just mentioned to try to avoid memory leaks caused by closures!