一步一步教你写带图片注释的淡入淡出插件(三)
2010-10-11 10:39
459 查看
接上一文,我们已经实现了图片的自动淡入淡出播放。接下来需要加入控制器。
其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!)
先说一下加入控制器的思路:
根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用a标签来做,考虑语义的话可以用ul或ol),考虑到书写样式的方便可以先create一个控制器父标签,然后依次把每个控制按钮append到控制器父标签,再把父标签append到我们的轮播模块中就ok了。然后再为对应的元素添加上对应的css样式即可
好了,说完思路,咱们动手开始,控制器的绘制应该在init()中。所以我们可以这样写:
上面的代码其实也就加了一句,在第6行。
有了这添加的8句话,再加上相应的css,控制器就初见雏形了。控制器css是这样的
在pos()中:
好了,这下基本上可以了,再看看效果:
<!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"><!--
#fader{position:relative;overflow:hidden;height:300px;width:500px}
#fader li{position:absolute;left:0;top:0;}
ul,li{list-style:none;margin:0;padding:0}
img{display:block;}
.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;}
.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;}
--></style>
<script type="text/javascript"><!--
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
function init(anthor,options){this.anchor=anthor; this.init(options);}
init.prototype = {
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.curC = options.curNavClass?options.curNavClass:'fader-cur-nav';
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); //变换函数
},
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>
<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"><!--
var fader = new Hongru.fader.init('fader',{
id:'fader'
});
// --></script>
</body>
</html>
恩,好了,上面这个效果其实大多数情况下已经够用了,不过有朋友有更多需求,想在底部加一个图片备注的层,这一个功能在下一部分实现吧!
其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!)
先说一下加入控制器的思路:
根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用a标签来做,考虑语义的话可以用ul或ol),考虑到书写样式的方便可以先create一个控制器父标签,然后依次把每个控制按钮append到控制器父标签,再把父标签append到我们的轮播模块中就ok了。然后再为对应的元素添加上对应的css样式即可
好了,说完思路,咱们动手开始,控制器的绘制应该在init()中。所以我们可以这样写:
, // 获取 li = this.li = H$$('li',ul)] 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是这样的
<!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"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} .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;} --></style> <script type="text/javascript"><!-- var Hongru={}; function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElementsByTagName(c)} Hongru.fader = function(){ function init(anthor,options){this.anchor=anthor; this.init(options);} init.prototype = { 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); //变换函数 }, 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> <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"><!-- var fader = new Hongru.fader.init('fader',{ id:'fader' }); // --></script> </body> </html> 发现了吧,咱们还缺个控制器当前的样式。所以还要添两句,一句添在init()中 this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; //定义控制器当前样式变量,在pos()中把它赋给对应的那一个
在pos()中:
.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"><!--
#fader{position:relative;overflow:hidden;height:300px;width:500px}
#fader li{position:absolute;left:0;top:0;}
ul,li{list-style:none;margin:0;padding:0}
img{display:block;}
.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;}
.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;}
--></style>
<script type="text/javascript"><!--
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
function init(anthor,options){this.anchor=anthor; this.init(options);}
init.prototype = {
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.curC = options.curNavClass?options.curNavClass:'fader-cur-nav';
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); //变换函数
},
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>
<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"><!--
var fader = new Hongru.fader.init('fader',{
id:'fader'
});
// --></script>
</body>
</html>
恩,好了,上面这个效果其实大多数情况下已经够用了,不过有朋友有更多需求,想在底部加一个图片备注的层,这一个功能在下一部分实现吧!
相关文章推荐
- 一步一步教你写带图片注释的淡入淡出插件(四)
- 一步一步教你写带图片注释的淡入淡出插件(三)
- 一步一步教你写淡入淡出带注释的图片轮播插件(一)
- 一步一步教你写带图片注释的淡入淡出插件(四)
- 一步一步教你写带图片注释的淡入淡出插件(三)
- 一步一步教你写淡入淡出带注释的图片轮播插件(一)
- 一步一步教你写淡入淡出带注释的图片轮播插件(一)
- 一步一步教你写淡入淡出带注释的图片轮播插件(二)
- jqueryUI插件---图片轮播框架淡入淡出
- jquery 插件之鼠标悬停图片切换效果(附详细注释)
- 【JQuery】图片灯箱插件——lightBox
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- Jquery图片滚动插件
- Lazy Load, 延迟加载图片的 jQuery 插件
- 上传图片预览插件(转)
- jQuery插件cycle图片变换
- jquery插件DGallery用于商城图片切换效果
- Xcode自动注释插件