java图片淡入淡出_[Java教程]javascript 图片淡入淡出效果 实例源代码_星空网

javascript 图片淡入淡出效果 实例源代码

2014-06-03

0

代码说明：把代码粘贴好之后，需要更改html代码中的图片路径，即可执行成功。

后面还有对js代码的详细说明，希望大家好好消化，好好理解。html源代码：1

2 图片切换 3 4 5 6 7

8

• 9
• 10
• 11
• 12

13

14

css源代码：1 #ad {width: 942px;height:302px;position:relative; margin:0 auto;}2 #ad ul {position: absolute;top: 0;left: 0;}3 #ad li {position: absolute; top: 0; left:0;opacity: 0;}

javascript源代码：1 window.onload = function () 2 { 3 jzk.app.Tobanner(); 4 } 5 6 var jzk = {}; 7 8 9 jzk.tools = {};10 jzk.tools.getStyle = function(obj,attr) 11 {12 if(obj.currentStyle)13 {14 return obj.currentStyle[attr];15 }16 else17 {18 return getComputedStyle(obj,false)[attr];19 }20 }21 22 jzk.ui = {};23 jzk.ui.fadeIn = function(obj)24 {25 var iCur = jzk.tools.getStyle(obj,'opacity');26 if(iCur==1)27 { 28 return false; 29 }30 31 var value = 0;32 clearInterval(obj.finishtimer);33 obj.finishtimer = setInterval(function() {34 var ispeed = 5;35 if(value == 100)36 {37 clearInterval(obj.finishtimer);38 }39 else40 {41 value = value +ispeed;42 obj.style.opacity = value/100;43 obj.style.filter = "alpha=('+value+')";44 }45 }, 30);46 47 }48 jzk.ui.fadeOut = function(obj)49 {50 var iCur = jzk.tools.getStyle(obj,'opacity');51 if(iCur==0)52 { 53 return false; 54 }55 56 var value =100;57 clearInterval(obj.finishtimer);58 obj.finishtimer = setInterval(function() {59 var ispeed = -5;60 if(value == 0)61 {62 clearInterval(obj.finishtimer);63 }64 else65 {66 value = value +ispeed;67 obj.style.opacity = value/100;68 obj.style.filter = "alpha=('+value+')";69 }70 }, 30);71 72 }73 74 jzk.app = {};75 jzk.app.Tobanner=function() 76 {77 var ad = document.getElementById('ad');78 var lists = ad.getElementsByTagName('li');79 80 var iNow = 0;81 var finishtimer = setInterval(showpic,4000);82 83 function showpic ()84 {85 if(iNow == lists.length-1)86 {87 iNow = 0;88 }89 else90 {91 iNow ++;92 }93 for(var i=0;i

对javascript源代码的几大点理解：

一.我采用分层的理念编写代码，思路清晰，对后期的管理和修改很有帮助：

1.var jzk ={}；定义民命空间；

2.jzk.tools = {}； 分层第一层，基本应用工具；

3.jzk.ui = {}； 分层第二层，一些广泛使用的函数包装；

jzk.app = {}； 分层第三层，直接用于页面调用的应用函数；

二.jzk.tools层上的函数：

jzk.tools.getStyle函数用于定义一个可以获取元素属性值得函数；

三.jzk.ui层上的函数：

1.jzk.ui.fadeIn函数功能：淡出函数(用来显示图片)，在后面的jzk.app层中将会被调用；值得注意的是下面这段代码：

var iCur = jzk.tools.getStyle(obj,'opacity');

if(iCur==1)

{ return false;

}

这段代码是必不可少的，意思解释为：定义变量iCur存储元素的opacity属性值，判断如果为1，也就是完全可见的元素，则返回错误，不执行下面的代码；

2.jzk.ui.fadeOut函数功能：淡入函数(用来隐藏图片)，同样是这样一段代码：

var iCur = jzk.tools.getStyle(obj,'opacity');

if(iCur==0)

{

return false;

}

因为此处是用来隐藏图片，所以先定义变量iCur存储元素的opacity属性，判断如果为0，也就是完全不可见图片，所以就没必要再隐藏，所以返回错误；

四.jzk.app层上的函数：

jzk.app.Tobanner函数功能，就是用来页面调用的应用函数，定义一个当前变量，使当前图片显示，其他的图片隐藏，从而达到了淡入淡出的效果。

五.页面调用：

页面调用代码实现：

window.onload = function ()

{

jzk.app.Tobanner()；

}

直接调用应用层的函数即可。

0

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。