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

This should be the last part of this series.
The effect of the third part has basically met most of the requirements. Therefore, this part can only be considered a plus point. Let's continue with the blog.
In fact, the carousel effect with translucent Background remarks is also captured on the Internet, such as 163, QQ, and Taobao. You should be able to see similar effects if you look closely. Adding text is similar to adding a controller in the previous article. It is nothing more than append an element and display text in it. CopyCode The Code is as follows:/* -- display remarks --*/
VaR alt = This. Alt = Document. createelement ('P'); // Add a p tag for displaying text
This. IMG = [];
For (var k = 0; k <this. l; k ++ ){
This. IMG. Push (h $ ('img ', this. Li [k]) [0]); // extract the image in the carousel module to alt
}
.
.
.
WP. appendchild (ALT );//
This. texth = nav_wp.offsetheight;
Alt.style.css text = '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 for this layer

The above are the two pieces of code added in the init () function. Easy to understand. I will not go into detail. In addition. Similarly, you need to change the Z-index value in the transform function so that the controller is at the highest level of text and the alt text is written to the text layer. If you need to slide the result, in the POs (), the height is cleared by 0, and the fade () can be changed by using top or left. Therefore, the code in the POs () is changed as follows:Copy codeThe Code is as follows: This. alt. style. zindex = This. Z + 1;
Nav_wp.style.zindex = This. Z + 2;
.
This. alt. style. Height = 0; // sliding effect of the remarks Layer
.
This. alt. innerhtml = This. IMG [I]. ALT; // implant alt text

If the text layer has a height change effect, add a text layer height change in fade (): copy Code the code is as follows: This. alt. style. height = math. ceil (this. li [I]. O * This. texth/100) + 'px '; // text slide effect

well, this is almost the case. Let's take a look at the final effect. <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <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> <p> <ul> <li> </LI> <li> </LI> </ul> <p>