Step by step teach you to write a fade-in and fade-out plug-in with image comments (3)

In fact, with the good code structure, it is very easy to add the controller (pai_^ that is why I said that the code structure of the initial architecture is very important !)
Let's talk about how to add a controller:
Add a corresponding control button for each element based on the number of carousel elements (here I use the label directly, ul or ol can be used for semantics ), for the convenience of writing style, you can first create a controller parent tag, then append each control button to the Controller parent tag, and then append the parent tag to our carousel module. Then add the corresponding css style to the corresponding element.
Now, let's get started. The Controller should be drawn in init. So we can write:
Copy codeThe Code is as follows:
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
Nav_wp = document. createElement ('div '); // first create a div as the controller parent tag. You can also use <ul> or <ol> to do this. The semantics may be better. I will not change it here.
Nav_wp.style.cssText = 'position: absolute; right: 0; bottom: 0; padding: 8px 0; '; // set a style for it
/* = 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
/* = Drawing controller = */
Var nav = document. createElement ('A'); // here I use the tag as the controller. You can also use the li
Nav. className = options. navClass? Options. navClass: 'fader-nav'; // controller class. The default value is 'fader-nav'
Nav. innerHTML = I + 1;
Nav. onclick = new Function (this. anchor + '. pos (' + I + '); // bind an onclick event and directly call the previously written pos () Function
Nav_wp.appendChild (nav );
}
Wp. appendChild (nav_wp); // controller append to the page
This. pos (this. index); // Transformation Function
},

The above code is the complete init () after the controller is added, a total of seven lines of code are added.
If you write it here, some friends may try it out in a hurry and find that they cannot see the Controller they have added...
Well, don't forget, we use z-index to control the invisibility of images. Other people's z-indexes have been increasing one by one from the very beginning, the default z-index created by the Controller is only 0, which cannot be displayed. So we have to add a line of code to control the z-index of the controller. So that it is always on top of the carousel element.
Therefore, in the transformation function pos,
Copy codeThe Code is as follows:
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.
Nav_wp.style.zIndex = this. z + 1; // The Controller z-index must always be 1 larger than the maximum z-index of the carousel element.
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. anchor + '. fade (' + I + '), 20 );
},

The above Code actually adds a sentence, in the 6th line.
With the 8 sentences added here, and the corresponding css, the controller is starting to take shape. The Controller css is like this.
Copy codeThe Code is as follows :. fader-nav {display: inline-block; margin-right: 8px; color: # fff; padding: 2px 6px; background: #333; border: 1px solid # fff; font-family: Tahoma; font-weight: bold; font-size: 12px; cursor: pointer ;}
Let's take a look at the prototype.
<! 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]
We still have a lack of current controller style. Therefore, we need to add a sentence to init ().
This. curC = options. curNavClass? Options. curNavClass: 'fader-cur-nav'; // defines the current style variable of the controller and assigns it to the corresponding one in pos ().
In pos:
For (var x = 0; x <this. l; x ++ ){
Nav_wp.getElementsByTagName ('A') [x]. className = x = I? This. curC: 'fader-nav'; // bind the current controller Style
}
In this way, the css style in the current State is added:
. Fader-cur-nav {display: inline-block; margin-right: 8px; color: # fff; padding: 2px 6px; background: # ff7a00; border: 1px solid # fff; font-family: Tahoma; font-weight: bold; font-size: 12px; cursor: pointer ;}
Okay, now we can basically see the effect again:
<! 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]
Well, the above effect is actually enough in most cases, but some friends have more requirements and want to add a picture remarks layer at the bottom. This function will be implemented in the next part!