时间:2021-05-25
其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!)
先说一下加入控制器的思路:
根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用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标签来做控制器,考虑语义的话你也可以用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;}
看下雏形效果吧。
step2
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看
本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下:这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实
本文实例为大家分享了Unity实现背景图片淡入淡出的具体代码,供大家参考,具体内容如下如题。背景是两个图片,每隔一段时间图片1淡出,2淡入,然后2淡出,1淡入很
本文实例为大家分享了Unity3D实现图片循环淡入淡出的具体代码,供大家参考,具体内容如下1、说明由于近期项目需求,在网上找了淡入淡出的代码,但都是两张图片淡入
在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能。1.创建table三行三列,用来存放坑(图片)2.获得所有的图片标签3.老鼠的