Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills

In fact, with the good code structure before, it is very simple to add a controller (^_^ This is why I said that the code structure of the initial architecture is very important!)
Let me first talk about the idea of ​​adding a controller:
Add a corresponding control button to each element according to the number of carousel elements (here I directly use the a tag to do it, if you consider the semantics, you can use ul or ol), considering the convenience of writing style, you can create a controller first Parent tag, then append each control button to the controller parent tag in turn, and then append the parent tag to our carousel module. Then add the corresponding css style to the corresponding element
Okay, after talking about the idea, let’s start. The drawing of the controller should be in init(). So we can write like this:

Copy 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): starting picture serial number
var wp = H$(options .id), // Get the parent element of the picture 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; //Picture number to start running ( Starting from 0)
this.l = li.length;
this.cur = this.z = 0; //Currently displayed picture number&&z-index variable
nav_wp = document.createElement('div '); //First create a div as the parent tag of the controller. You can also use

or

. The semantics may be better, so I won't change it here.
nav_wp.style. cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //Set style for it
/* ==Add fade in and fade out function==*/
for(var i =0;ithis.li[i].o = 100; //Set a transparency change for each image
this.li[i].style. opacity = this.li[i].o/100; //For non-IE, just use opacity
this.li[i].style.filter = 'alpha(opacity=' this.li[i].o ' )'; //IE uses filter
/* == Draw controller == */
var nav = document.createElement('a'); //Here I will directly use the a tag to control controller, if you consider semantics, you can also use li
nav.className = options.navClass?options.navClass:'fader-nav'; //Controller class, the default is 'fader-nav'
nav.innerHTML = i 1;
nav.onclick = new Function(this.anchor '.pos(' i ')'); //Bind the onclick event and directly call the previously written pos() function
nav_wp. appendChild(nav);
}
wp.appendChild(nav_wp); //The controller appends to the page
this.pos(this.index); //Transformation function
},

The above code is the complete init() after adding the controller, which adds a total of 7 lines of code.
Writing this, some friends may be anxious to try it, only to find that they can’t see the controller they added. . .
Haha, don’t forget, we use z-index to control the display and hiding of pictures. Others’ z-index keeps increasing one by one from the beginning, but the default z-index is only 0 when the controller is built. , of course it is impossible to show it. So we have to add another line of code to control the z-index of this controller. So that it is always on top of the carousel element.
　So, in the transformation function pos(),

Copy the code The code is as follows:

pos:function(i){
clearInterval(this.li.a); //Clear the automatic change timer
clearInterval(this.li[i].f); //Clear the fade effect timer
this.z ;
this.li[i].style.zIndex = this.z; //Increase the z-index of the next picture by one each time
nav_wp.style.zIndex = this. z 1; //The z-index of the controller must always be 1 greater than the one with the largest z-index of the carousel element
this.cur = i; //Bind the correct serial number of the currently displayed image
this.li .a = false; //Make a mark, which will be used below, indicating that the clear timer has been completed
//this.auto(); //Automatically run
if(this.li[i].o> ;=100){ //Set the image transparency to transparent before fading 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 just adds one sentence, on line 6.
With these 8 added sentences and the corresponding css, the controller has begun to take shape. The controller css is like this

Copy the code The 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 effect.

<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;} .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;} --></style> <div id="fader"> <ul> <li> <img src="http://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"> </li> </ul> </div>
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh it to execute
]

Have you discovered it? The current style of the controller is missing. So I need to add two sentences, one in init()
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //Define the current style variable of the controller, in pos() Assign it to the corresponding one
in pos():
for(var x=0;xnav_wp.getElementsByTagName('a')[x ].className = x==i?this.curC:'fader-nav'; //Bind the current controller style
}
This is ok, plus the current state css style:
.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 it’s basically OK. Let’s take a look at the effect: <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title> </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;} .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;} .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;} --></style>step2 <div id="fader"> <ul> <li> <img src="http://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"> </li> <li><img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (3)_javascript skills"></li> </ul> </div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
글쎄, 사실 대부분의 경우 위의 효과로 충분하지만 일부 친구는 더 많은 요구 사항이 있어 하단에 그림 노트 레이어를 추가하고 싶어합니다. 이 기능은 다음 부분에서 구현됩니다!