js实现多个图片淡入淡出，框架

单个淡入淡出已经写过，可以看看上几遍的博文

<style>
*{
    margin:0;
    padding:0;
}
    div{
        height:100px;
        width:100px;
        background:red;
        margin:0 auto;
        margin-bottom:5px;
        filter:alpha(opacity:30);
        opacity:0.3;
    }
</style>

<body>
<div></div>
<div></div>
<div></div>
<div></div>

</body>

js代码如下

带注释

 <script>
 window.onload=function()
 {
     var div=document.getElementsByTagName('div');
     for(var i=0;i<div.length;i++)
     {
         div[i].alpha=30;   //每个div都给透明度30
         div[i].onmouseover=function()  //当鼠标移动到div上时，div的透明度为100
         {
             startMove(this,100)
         }
          div[i].onmouseout=function()  //当鼠标移出div时，div的透明度为30
         {
             startMove(this,30)
         }
     }

 }
     var alpha=30;
     function startMove(obj,iTarget)
     {
         clearInterval(obj.timer);
         obj.timer=setInterval(function()
         {
             var speed=(iTarget-obj.alpha)/10;   //速度是目标的透明度减去div原本的透明度除以10，
             speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度必需上下取整，因为没有浮点的小数透明度
             if(obj.alpha==iTarget)   //如果透明度达到目标的透明度，clear
             {
                 clearInterval(obj.timer);
             }
             else
             {
                 obj.alpha+=speed;
                 obj.style.filter='alpha(opacity:'+alpha+')';  //把alpha赋值给透明度
                 obj.style.opacity=obj.alpha/100;
             }
         }

             , 30)
     }
 </script>