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

　　接上一文，我们已经实现了图片的自动淡入淡出播放。接下来需要加入控制器。

　　其实凭借着之前良好的代码结构，加入控制器很简单（^_^这也就是为什么我说刚开始的架构的代码结构很重要！）

　　先说一下加入控制器的思路：
根据轮播元素的个数为每一个元素添加一个对应的控制按钮，（这里我直接用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作为控制器父标签，你也可以用<ul>或<ol>来做，语义可能会更好，这里我就不改了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标签来做控制器，考虑语义的话你也可以用linav.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最大的那个还大1this.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;}

看下雏形效果吧。

<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step2</title> <style type="text/css" _mce_bogus="1"></style> <script type="text/javascript"></script> </head> <body> <div id="fader"> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" alt="我是图片一" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" alt="哈哈，图片二" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" alt="这是图片三" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" alt="哈哈，图片四" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" alt="图片五来咯" /></li> </ul> </div> <script type="text/javascript"></script> </body> </html>

发现了吧，咱们还缺个控制器当前的样式。所以还要添两句，一句添在init()中

this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //定义控制器当前样式变量，在pos()中把它赋给对应的那一个

在pos()中：

for(var x=0;x<this.l;x++){nav_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;}

好了，这下基本上可以了，再看看效果：

<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step2</title> <style type="text/css" _mce_bogus="1"></style> <script type="text/javascript"></script> </head> <body> <div id="fader"> <ul> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" alt="我是图片一" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" alt="哈哈，图片二" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" alt="这是图片三" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" alt="哈哈，图片四" /></li> <li><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" alt="图片五来咯" /></li> </ul> </div> <script type="text/javascript"></script> </body> </html>

恩，好了，上面这个效果其实大多数情况下已经够用了，不过有朋友有更多需求，想在底部加一个图片备注的层，这一个功能在下一部分实现吧！

一步一步教你写带图片注释的淡入淡出插件（三）相关推荐

一步一步教你写带图片注释的淡入淡出插件（四）
不出意外的话,这应该是这个系列的最后一部分了. 第三部分的效果已经基本上满足大部分的需求了.所以这一部分呢,只能算是加分项.废话不多说了,还是继续博文吧. 其实带背景半透明的备注的轮播效果也是网上一抓 ...
手把手教你写带登录的NodeJS爬虫+数据展示
其实在早之前,就做过立马理财的销售额统计,只不过是用前端js写的,需要在首页的console调试面板里粘贴一段代码执行,点击这里.主要是通过定时爬取https://www.lmlc.com/s/web ...
手牵手教你写代码，从入门到精通
如果说到什么是好代码,我们肯定都能说出一堆规则,例如使用一致的格式和缩进.使用清晰的变量名和方法名.在必要时提供文档与注释.不要过度精简代码等等. 但是对于什么是烂代码,你有比较清晰的认识吗? 在 G ...
用VSCode打开带图片的.md文件
最近自学python发现一个特别好的教程,里面文档都是.md文件并且带图片的,我用sublime,UE等都能打开不能显示图片,所以就找到用VSCode打开. 把大象放进冰箱分三步,打开带图片的.md ...
手挽手带你学React：四档（上）一步一步学会react-redux （自己写个Redux）
手挽手带你学React入门四档,用人话教你react-redux,理解redux架构,以及运用在react中.学完这一章,你就可以开始自己的react项目了. 之前在思否看到过某个大神的redux搭建 ...
android 分时图x轴宽度,一步一步教你写股票走势图——分时图二（自定义xy轴）...
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——分时图二（自定义xy轴）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——K线图二（图表联动）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——K线图四（高亮联动一）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...

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

一步一步教你写带图片注释的淡入淡出插件（三）相关推荐

最新文章

热门文章