一步一步教你写带图片注释的淡入淡出插件（四）_javascript技巧_懂视

一步一步教你写带图片注释的淡入淡出插件（四）_javascript技巧

2020-11-27 20:55:12 责编:小采

不出意外的话，这应该是这个系列的最后一部分了。
　　第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。
　　其实带背景半透明的备注的轮播效果也是网上一抓一大把，163,qq，taobao等等，仔细找找应该都能看到类似的效果。添加文本其实和前一文的添加控制器的方法差不多。无非也就是再append一个元素，在里面显示文本即可。
代码如下:
/* -- 显示备注 --*/
var alt = this.alt = document.createElement('p'); //添加一个p标签，用于显示文本
this.img = [];
for(var k=0;kthis.img.push(H$$('img',this.li[k])[0]); //提取轮播模块里的图片，目的是取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);'; //为这个层添加样式

上面是init() 函数里添加的两段代码。都很易懂。就不细讲了。另外。同样要在变换函数里改变z-index值，让控制器处于最高，文本层次之，同时再把alt文本写入到这个文本层里面，如果需要滑动效果的话，在pos()里面把高度清0，在fade()里做高度变换即可（同样也可以用top或left来做）；故pos()里改动代码如下：
代码如下:
this.alt.style.zIndex = this.z+1;
nav_wp.style.zIndex = this.z+2;
.
this.alt.style.height = 0; //做备注层的滑动效果
.
this.alt.innerHTML = this.img[i].alt; //植入alt文本

如果文本层有高度变化效果的话，fade()里面加一句文本层的高度变化即可：
代码如下:
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑动效果

恩，这样就差不多了。再看看最后的效果吧。

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>step4</title> 
<style type="text/css"></style> 
<script type="text/javascript">来做，语义可能会更好，这里我就不改了 
nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式 
/* -- 显示备注 --*/ 
var alt = this.alt = document.createElement('p'); //添加一个p标签，用于显示文本 
this.img = []; 
for(var k=0;k<this.l;k++){ 
this.img.push(H$$('img',this.li[k])[0]); //提取轮播模块里的图片，目的是取alt 
} 
/* ==加入淡入淡出功能 ==*/ 
for(var i=0;i<this.l;i++){ 
this.li[i].o = 100; //为每一个图片都设置一个透明度变化量 
this.li[i].style.opacity = this.li[i].o/100; //非IE用opacity即可 
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //IE用滤镜 
/* == 绘制控制器 == */ 
var nav = document.createElement('a'); //这里我就直接用a标签来做控制器，考虑语义的话你也可以用li 
nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默认为'fader-nav' 
nav.innerHTML = i+1; 
nav.onclick = new Function(this.anchor+'.pos('+i+')'); //绑定onclick事件，直接调用之前写好的pos()函数 
nav_wp.appendChild(nav); 
} 
wp.appendChild(alt); // 
wp.appendChild(nav_wp); //控制器append到页面 
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);'; //为这个层添加样式 
this.pos(this.index); //变换函数 
}, 
auto:function(){ 
this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); 
}, 
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张 
var n = this.cur+i; 
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一张或上一张的序号（注意三元选择符的运用） 
this.pos(m); //变换到上一张或下一张 
}, 
pos:function(i){ 
clearInterval(this.li.a); //清除自动变换计时器 
clearInterval(this.li[i].f); //清除淡入淡出效果计时器 
this.z++; 
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一 
this.alt.style.zIndex = this.z+1; 
nav_wp.style.zIndex = this.z+2; 
this.cur = i; //绑定当前显示图片的正确序号 
this.li.a = false; //做一个标记，下面要用到，表示清除计时器已经完成 
//this.auto(); //自动运行 
if(this.li[i].o>=100){ //在图片淡入之前先把图片透明度置为透明 
this.li[i].o = 0; 
this.li[i].style.opacity = 0; 
this.li[i].style.filter = 'alpha(opacity=0)'; 
this.alt.style.height = 0; //做备注层的滑动效果 
} 
this.alt.innerHTML = this.img[i].alt; //植入alt文本 
for(var x=0;x<this.l;x++){ 
nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //绑定当前控制器样式 
} 
this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20); 
}, 
fade:function(i){ 
if(this.li[i].o>=100){ 
clearInterval(this.li[i].f); //如果透明度变化完毕，清除计时器 
if(!this.li.a){ //确保所有计时器都清除掉之后再开始自动运行。要不然会导致有控制器时点击过快的话，计时器没来得及清除就开始下一次变化，功能就乱了 
this.auto(); 
} 
} 
else{ 
this.li[i].o+=5; 
this.li[i].style.opacity = this.li[i].o/100; 
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; 
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑动效果 
} 
} 
} 
return {init:init} 
}(); 
// --></ script> 
</head> 
<body> 
 
 
<li><mip-img popup src="http://files.jb51.net/upload/201010/20101011221558299.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558299.jpg" alt="我是图片一" /></mip-img></li> 
<li><mip-img popup src="http://files.jb51.net/upload/201010/20101011221558112.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558112.jpg" alt="哈哈，图片二" /></mip-img></li> 
<li><mip-img popup src="http://files.jb51.net/upload/201010/20101011221558758.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558758.jpg" alt="这是图片三" /></mip-img></li> 
<li><mip-img popup src="http://files.jb51.net/upload/201010/20101011221558158.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558158.jpg" alt="哈哈，图片四" /></mip-img></li> 
<li><mip-img popup src="http://files.jb51.net/upload/201010/20101011221558834.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558834.jpg" alt="图片五来咯" /></mip-img></li> 
 
 
<script type="text/javascript"></ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
恩，文章最后，差点忘了说一个很关键的点，就是options的配置参数：
在实例化 new Hongru.fader.init()的时候，第二个参数即为配置参数，是个对象，可选配置参数如下
{
id: //(必选)，轮播列表父元素id
auto: //(可选)自动播放时间间隔秒数
navClass: //(可选) 控制器className
curNavClass: //(可选) 控制器当前状态className
index: //(可选)初始化时从第几个位置开始播放，默认为0,即第一个元素
}
好了，这一系列到此结束！！源码大家可以自行更改

下载本文

显示全文

全部频道