首页 > 代码库 > javascript 图片淡入淡出效果 实例源代码

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

2024-07-06 22:50:49   228人阅读

?
1
代码说明：把代码粘贴好之后，需要更改html代码中的图片路径，即可执行成功。<br>后面还有对js代码的详细说明，希望大家好好消化，好好理解。<br><br>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     else
17     {
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 = http://www.mamicode.com/0;
32     clearInterval(obj.finishtimer);
33     obj.finishtimer = setInterval(function() {
34         var ispeed = 5;
35         if(value =http://www.mamicode.com/= 100)
36         {
37            clearInterval(obj.finishtimer);
38         }
39         else
40         {
41             value = http://www.mamicode.com/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 =http://www.mamicode.com/100;
57     clearInterval(obj.finishtimer);
58     obj.finishtimer = setInterval(function() {
59         var ispeed = -5;
60         if(value =http://www.mamicode.com/= 0)
61         {
62            clearInterval(obj.finishtimer);
63         }
64         else
65         {
66             value = http://www.mamicode.com/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         else
90         {
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)

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

            }

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


联系
我们