JS实现Flash淡入淡出效果

      前几天，有个朋友叫我帮他做一个静态网页，并说时间很紧，就半个小时，我这个人比较重情谊，也比较讲义气，所以什么都不说接下来了。在其中他要求总的大小 不能超过500K，原来他自己找人也做了一个版本的，也随便给我了，我也比较懒，所以我就在他的基础上改了。我拿来一看，当时晕了，一个网页竟然有4M， 还说不能超过500K呢。我打开看了看，原来用了好多的Flash，我就给他把一些Flash撤了，但是他说那个淡入淡出的效果不能掉，所以我就加上去， 结果还是800多K。这样我就没办法咯，就只有想用代码来给他实现了，在有限的记忆当中好像曾经看过的，所以上网一收，有淡入淡出的效果，但是没有多张图 片切换的（哎，可能是没找到吧）！所以我就自己把找到的代码研究研究，自己写了个，呵呵…… 运气很好，试了几下就成功了。怕忘了，所以写上来做记录，也方便其他需要的朋友不用到处去找和写了！下面就是我的代码，如果各位有什么好的见解，可以提 出。

以下代码重新进行更新，修改了不兼容Firefox和Opera浏览器。

 

< html >
   < head >
     < title > dt filter </ title >
     < script language = " javascript " >
       <!--
        var j = 0 ;
        var i  =   100 ;
        var c  =   false ;
         //  the array is used to store the picture
        names =   new  Array();
        names[ 0 ] = " F001.JPG " ;
        names[ 1 ] = " DSC01297.JPG " ;
        names[ 2 ] = " DSC08292.JPG " ;
        names[ 3 ] = " 11.jpg " ;
        names[ 4 ] = " DSCF1670.JPG " ;
        var isIE  =  isIE();
         // var isIE = true;
        function filter(){
             if (document.all);
             if (c  ==   true ) {
                i ++ ;
            }
             if (i == 100 ) {
                i -- ;
                c  =   false
            }
             if (i == 1 ) {
                i ++ ;
                c  =   true ;
                 // change the picture
                 if (j == names.length - 1 ){j = 0 ;}
                     else { ++ j;}
                 // alert(j);
                 // get the picture by the index of names array
                myimage.src = names[j];
            }
             if (c  ==   false ) {
                i -- ;
            }
            
              // show or hide the picture by filter
             // alert(isIE);
             if  (isIE)
            {
                myimage.filters.alpha.opacity = i;
            }
             else
            {
                myimage.style.opacity  =  i / 100 ;
            }
            setTimeout( " filter() " , 50 );
        }

    function isIE()
    {
        var ret  =   false
         if  (navigator.userAgent.indexOf( " MSIE " ) > 0 )
        {
            ret  = true ;    
        }
         return  ret;
    }

       -->
     </ script >
   </ head >

  < body onload = " filter() " ><!-- load the js function -->
       < img id = " myimage "  src = " F001.JPG "  width = " 500 "  height = " 350 "
        style = " filter:alpha();position:absolute;top:10;left:0; " >
      </ body >
  </ html >