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

来源：动视网责编：小采时间：2020-11-27 20:55:12

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

一步一步教你写带图片注释的淡入淡出插件（三）_javascript技巧:其实凭借着之前良好的代码结构，加入控制器很简单（^_^这也就是为什么我说刚开始的架构的代码结构很重要！）先说一下加入控制器的思路：根据轮播元素的个数为每一个元素添加一个对应的控制按钮，（这里我直接用a标签来做，考虑语义的话可以用ul或ol），

推荐度：

点击下载本文 文档为doc格式

导读一步一步教你写带图片注释的淡入淡出插件（三）_javascript技巧:其实凭借着之前良好的代码结构，加入控制器很简单（^_^这也就是为什么我说刚开始的架构的代码结构很重要！）先说一下加入控制器的思路：根据轮播元素的个数为每一个元素添加一个对应的控制按钮，（这里我直接用a标签来做，考虑语义的话可以用ul或ol），

其实凭借着之前良好的代码结构，加入控制器很简单（^_^这也就是为什么我说刚开始的架构的代码结构很重要！）
　　先说一下加入控制器的思路：
根据轮播元素的个数为每一个元素添加一个对应的控制按钮，（这里我直接用a标签来做，考虑语义的话可以用ul或ol），考虑到书写样式的方便可以先create一个控制器父标签，然后依次把每个控制按钮append到控制器父标签，再把父标签append到我们的轮播模块中就ok了。然后再为对应的元素添加上对应的css样式即可
　　好了，说完思路，咱们动手开始，控制器的绘制应该在init()中。所以我们可以这样写：
代码如下:
init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
var wp = H$(options.id), // 获取图片列表父元素
ul = H$$('ul',wp)[0], // 获取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自动运行间隔
this.index = options.position?options.position:0; //开始运行的图片序号（从0开始）
this.l = li.length;
this.cur = this.z = 0; //当前显示的图片序号&&z-index变量
nav_wp = document.createElement('div'); //先建一个div作为控制器父标签，你也可以用或

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(nav_wp); //控制器append到页面
this.pos(this.index); //变换函数
},

上面的代码即是加入控制器后的完整init（），总共也就增加了7行代码。
写到这里，可能有朋友会着急去试了，结果发现根本看不到自己添进去的控制器。。
呵呵，别忘了，我们是用z-index来控制图片显隐的，别人的z-index从一开始就不断的一个一个增加，而控制器一建出来默认的z-index只是0,当然不可能显示出来。所以我们还得再加一行代码来控制这个控制器的z-index。好让它始终处于轮播元素之上。
　　所以，在变换函数pos()中，
代码如下:
pos:function(i){
clearInterval(this.li.a); //清除自动变换计时器
clearInterval(this.li[i].f); //清除淡入淡出效果计时器
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
nav_wp.style.zIndex = this.z+1; //控制器z-index要始终比轮播元素z-index最大的那个还大1
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.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
},

上面的代码其实也就加了一句，在第6行。
有了这添加的8句话，再加上相应的css，控制器就初见雏形了。控制器css是这样的
代码如下:.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;}
看下雏形效果吧。

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>step2</title> 
<style type="text/css"></style> 
来做，语义可能会更好，这里我就不改了 
nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式 
/* ==加入淡入淡出功能 ==*/ 
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(nav_wp); //控制器append到页面 
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加一 
nav_wp.style.zIndex = this.z+1; 
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.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+')'; 
} 
} 
} 
return {init:init} 
}(); 
// --></ script> 
</head> 
<body> 
 
 
<li><img src="http://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" 我是图片一" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" 哈哈，图片二" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" 这是图片三" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" 哈哈，图片四" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" 图片五来咯" /></li> 
 
 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
发现了吧，咱们还缺个控制器当前的样式。所以还要添两句，一句添在init()中
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //定义控制器当前样式变量，在pos()中把它赋给对应的那一个
在pos()中：
for(var x=0;xnav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //绑定当前控制器样式
}
这样就ok了，另外再加上当前状态的css样式：
.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;}
好了，这下基本上可以了，再看看效果：

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>step2</title> 
<style type="text/css"></style> 
来做，语义可能会更好，这里我就不改了 
nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式 
/* ==加入淡入淡出功能 ==*/ 
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(nav_wp); //控制器append到页面 
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加一 
nav_wp.style.zIndex = this.z+1; 
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)'; 
} 
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+')'; 
} 
} 
} 
return {init:init} 
}(); 
// --></ script> 
</head> 
<body> 
 
 
<li><img src="http://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" 我是图片一" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" 哈哈，图片二" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" 这是图片三" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" 哈哈，图片四" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" 图片五来咯" /></li> 
 
 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
恩，好了，上面这个效果其实大多数情况下已经够用了，不过有朋友有更多需求，想在底部加一个图片备注的层，这一个功能在下一部分实现吧！

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

推荐度：

点击下载本文 文档为doc格式

标签：图片技巧插件

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐