Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 18:18:51
Original
1015 Leute haben es durchsucht

其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!)
  先说一下加入控制器的思路:
根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用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作为控制器父标签,你也可以用
    来做,语义可能会更好,这里我就不改了
    nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式
    /* ==加入淡入淡出功能 ==*/
    for(var i=0;ithis.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;}

看下雏形效果吧。

[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;}
好了,这下基本上可以了,再看看效果:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

恩,好了,上面这个效果其实大多数情况下已经够用了,不过有朋友有更多需求,想在底部加一个图片备注的层,这一个功能在下一部分实现吧!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage