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

If nothing else, this should be the last part of this series.
The effects of the third part have basically met most of the needs. So this part can only be regarded as a bonus. Without further ado, let’s continue with the blog post.
In fact, the carousel effect of notes with translucent background is also available online, such as 163, qq, taobao, etc. If you search carefully, you should be able to see similar effects. Adding text is actually similar to the method of adding a controller in the previous article. It's nothing more than appending another element and displaying text inside.

Copy code The code is as follows:

/* -- Show notes--*/
var alt = this.alt = document.createElement('p'); //Add a p tag to display text
this.img = [];
for(var k=0;kthis.img.push(H$$('img',this.li[k])[0]); //Extract the pictures in the carousel module, the purpose is to get alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight;
alt.style.cssText = 'height :' this.textH 'px;line-height:' this.textH 'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom: 0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //Add a style to this layer

The above is init () function added two pieces of code. All easy to understand. I won’t go into details. in addition. Also change the z-index value in the transformation function, so that the controller is at the highest level, at the text level, and at the same time write the alt text into this text layer. If a sliding effect is needed, clear the height to 0 in pos() , just do the height transformation in fade() (you can also use top or left); therefore, change the code in pos() as follows:

Copy code The code is as follows:

this.alt.style.zIndex = this.z 1;
nav_wp.style.zIndex = this.z 2;
.
this.alt.style.height = 0; //Make the sliding effect of the note layer
.
this.alt.innerHTML = this.img[i].alt; //Insert alt text

If the text layer has a height change effect, just add a sentence about the height change of the text layer in fade():

Copy code The code is as follows:

this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100) 'px' ; //Make text sliding effect

Well, that’s almost it. Let’s take a look at the final effect.

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>step4</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> <div id="fader"> <ul> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558299.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skills"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558112.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skills"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558758.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skills"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558158.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skills"> </li> <li> <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201010/20101011221558834.jpg?x-oss-process=image/resize,p_40" class="lazy" _mce_ alt="Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skills"> </li> </ul> </div>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]
Well, at the end of the article, I almost forgot to mention a very critical point, which is the configuration parameters of options:
When instantiating new Hongru.fader.init(), the second parameter is the configuration parameter. It is an object, and the optional configuration parameters are as follows
{
id: //(required), carousel list parent element id
auto: //(optional) automatic playback interval seconds
navClass: //(optional) Controller className
curNavClass: //(optional) Controller current state className
index: //(optional) From which position to start playing during initialization, the default is 0, that is, the first element
}
Okay, this series ends! ! You can change the source code yourself