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.
/* -- 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:
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():
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.
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