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

发布时间:2020-07-16编辑:脚本学堂
本文介绍了js实现图片淡入淡出效果的一例代码,有需要的朋友参考下。

使用代码时,需要更改html代码中的图片路径,即可执行成功。
后面还有对js代码的详细说明,希望大家好好消化,好好理解。

1,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>

2,css源代码:
 

复制代码 代码示例:
#ad {width: 942px;height:302px;position:relative; margin:0 auto;}
#ad ul {position: absolute;top: 0;left: 0;}
#ad li {position: absolute; top: 0; left:0;opacity: 0;}

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();
}

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