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

2024-04-27 14:23:11

字体：大中小

来源：转载

供稿：网友

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

代码说明：把代码粘贴好之后，需要更改html代码中的图片路径，即可执行成功。后面还有对js代码的详细说明，希望大家好好消化，好好理解。html源代码：

 1 <head> 2     <title>图片切换</title> 3     <script type="text/Javascript" src="图片切换.js"></script> 4     <link rel="stylesheet" type="text/CSS"  href = "图片切换.css"> 5   </head> 6   <body> 7     <div id="ad"> 8               <ul> 9                   <li style="filter:alpha(opacity=100); opacity:1;"><img src="banner/ad_banner1.png" alt="" /></li>10                   <li><img src="banner/ad_banner2.png" alt="" /></li>11                   <li><img src="banner/ad_banner3.png" alt="" /></li>12                </ul>13      </div>14   </body>

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<lists.length;i++)94         {95             jzk.ui.fadeOut(lists[i]);96         }97        jzk.ui.fadeIn(lists[iNow]);98     }99 }

对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)