珠江路在线
首页
互联网思维
硬件中心
软件中心
游戏中心
源码之家
今日新鲜事
传奇
软件开发培训班
>>
编程开发
>> JavaScript
软件新闻
编程开发
创意设计
操作系统
软件下载
一步一步教你写带图片注释的淡入淡出插件（三）
本文标签：淡入淡出
<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step2</title> <style type="text/css"><!-- #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://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" alt="我是图片一" /></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" alt="哈哈，图片二" /></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" alt="这是图片三" /></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" alt="哈哈，图片四" /></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" alt="图片五来咯" /></li> </ul> </div> <script type="text/javascript"><!-- var fader = new Hongru.fader.init(fader,{ id:fader }); // --></script> </body> </html>
技术文章快速查找
JQuery 浮动导航栏实现代码
JavaScript DOM学习第一章 W3C DOM简介
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
javascript+xml实现简单图片轮换(只支持IE)
巧用局部变量提升javascript性能
用document.documentElement取代document.body的原因分析
文本框回车提交与禁止提交示例
用JQuery调用Session的实现代码
相关下载
在线教程导航
软件应用
·
Windows8
·
Windows7
·
Word
·
Excel
·
PPT
·
WPS
Web开发
·
ASP
·
JavaScript
·
DIV+CSS
·
JSP
·
VbScript
·
XML
·
PHP
开发语言
·
VB
·
VC
·
ASP.NET
·
Java
·
C++
·
Delphi
数据库开发
·
MySQL
·
MsSQL
·
Access
·
Oracle
·
DB2
手机系统
·
Android
·
iOS
·
WindowsPhone
网站设计
·
Flash
·
Dreamweaver
·
Fireworks
平面设计
·
Photoshop
·
CorelDraw
·
AutoCAD
·
3DsMAX
·
Illustrator
网络技术
·
网站运营
·
网络安全
·
网络搭建
工具：
成语大全
邮编区号
全国地图
南京二手车
免费电影
汉字换拼音
繁体字转换
二维码
| 站长工具：
收录/反向链接
ALEXA排名
关键词排名
WHOIS
教程：
PPT
Excel
Word
Dreamweaver
Photoshop
|
ASP
PHP
|
ASP.NET
Java
|
SQL
MySQL
热门论坛：
游戏
美食
传奇
冒险岛
魔域
天龙八部
DNF
征途
游戏：
传奇
天龙八部
魔域
奇迹
DNF公益服
传奇世界
神途
梦幻西游
天龙八部
魔域
DNF
冒险岛
奇迹
魔域
传奇
单职业
天龙
魔域
梦幻西游
DNF
天龙八部
关于我们
广告报价
|
版权声明
：本网站归南京网爵数码科技有限责任公司版权所有。
苏ICP备05016148号-1
公安备案号 32010202010177
