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

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

html源代码：

 <head>

     <title>图片切换</title>

     <script type="text/javascript" src="图片切换.js"></script>

     <link rel="stylesheet" type="text/css"  href = "图片切换.css">

   </head>

   <body>

     <div id="ad">

               <ul>

                   <li style="filter:alpha(opacity=100); opacity:1;"><img src="banner/ad_banner1.png" alt="" /></li>

                   <li><img src="banner/ad_banner2.png" alt="" /></li>

                   <li><img src="banner/ad_banner3.png" alt="" /></li>

                </ul>

      </div>

   </body>

css源代码：

 #ad {width: 942px;height:302px;position:relative; margin:0 auto;}

 #ad ul {position: absolute;top:;left:;}

 #ad li {position: absolute; top:; left:;opacity:;}

javascript源代码：

 window.onload = function ()

 {

    jzk.app.Tobanner();

 }

 var jzk = {};

 jzk.tools = {};

 jzk.tools.getStyle = function(obj,attr)

 {

     if(obj.currentStyle)

     {

         return obj.currentStyle[attr];

     }

     else

     {

         return getComputedStyle(obj,false)[attr];

     }

 }

 jzk.ui = {};

 jzk.ui.fadeIn = function(obj)

 {

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

     if(iCur==1)

     {

         return false;

     }

     var value = 0;

     clearInterval(obj.finishtimer);

     obj.finishtimer = setInterval(function() {

         var ispeed = 5;

         if(value == 100)

         {

            clearInterval(obj.finishtimer);

         }

         else

         {

             value = value +ispeed;

             obj.style.opacity = value/100;

             obj.style.filter = "alpha=('+value+')";

         }

     }, 30);

 }

 jzk.ui.fadeOut = function(obj)

 {

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

     if(iCur==0)

     {

         return false;

     }

     var value =100;

     clearInterval(obj.finishtimer);

     obj.finishtimer = setInterval(function() {

         var ispeed = -5;

         if(value == 0)

         {

            clearInterval(obj.finishtimer);

         }

         else

         {

             value = value +ispeed;

             obj.style.opacity = value/100;

             obj.style.filter = "alpha=('+value+')";

         }

     }, 30);

 }

 jzk.app = {};

 jzk.app.Tobanner=function()

 {

     var ad = document.getElementById('ad');

     var lists = ad.getElementsByTagName('li');

     var iNow = 0;

     var finishtimer = setInterval(showpic,4000);

     function showpic ()

     {

         if(iNow == lists.length-1)

         {

             iNow = 0;

         }

         else

         {

             iNow ++;

         }

         for(var i=0;i<lists.length;i++)

         {

             jzk.ui.fadeOut(lists[i]);

         }

        jzk.ui.fadeIn(lists[iNow]);

     }

 }

对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（）；

}

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

jzk

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

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