JavaScript控制多张图片循环播放（淡入淡出效果）

 没事写着玩，呵呵，支持IE和FF。

    1.首先找一组图片，放到你的对应目录下。

    2.建立测试HTML页面，代码如下：

[xhtml] view plaincopy
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <HTML>  
    3. <HEAD>  
    4. <TITLE> 图片切换 </TITLE>  
    5. <META NAME="Generator" CONTENT="EditPlus">  
    6. <META NAME="Author" CONTENT="">  
    7. <META NAME="Keywords" CONTENT="">  
    8. <META NAME="Description" CONTENT="">  
    9. </HEAD>  
    10. <mce:style><!--  
    11. .imgShow{  
    12.     font-size: 12px;  
    13.     background-color: #B0C6CE;  
    14.     text-align: center;  
    15.     vertical-align: middle;  
    16.     display: table-caption;  
    17.     border-top-width: thin;  
    18.     border-right-width: thin;  
    19.     border-bottom-width: thin;  
    20.     border-left-width: thin;  
    21.     border-top-style: solid;  
    22.     border-right-style: solid;  
    23.     border-bottom-style: solid;  
    24.     border-left-style: solid;  
    25.     position:absolute;  
    26.     width:400px;  
    27.     height:300px;  
    28. }  
    29. .imgHide{  
    30.     font-size: 12px;  
    31.     background-color: #B0C6CE;  
    32.     text-align: center;  
    33.     vertical-align: middle;  
    34.     display: table-caption;  
    35.     border-top-width: thin;  
    36.     border-right-width: thin;  
    37.     border-bottom-width: thin;  
    38.     border-left-width: thin;  
    39.     border-top-style: solid;  
    40.     border-right-style: solid;  
    41.     border-bottom-style: solid;  
    42.     border-left-style: solid;  
    43.     position:absolute;  
    44.     filter:alpha(opacity=0);  
    45.     opacity:0.00;  
    46.     width:400px;  
    47.     height:300px;  
    48. }  
    49. --></mce:style><style mce_bogus="1">.imgShow{  
    50.     font-size: 12px;  
    51.     background-color: #B0C6CE;  
    52.     text-align: center;  
    53.     vertical-align: middle;  
    54.     display: table-caption;  
    55.     border-top-width: thin;  
    56.     border-right-width: thin;  
    57.     border-bottom-width: thin;  
    58.     border-left-width: thin;  
    59.     border-top-style: solid;  
    60.     border-right-style: solid;  
    61.     border-bottom-style: solid;  
    62.     border-left-style: solid;  
    63.     position:absolute;  
    64.     width:400px;  
    65.     height:300px;  
    66. }  
    67. .imgHide{  
    68.     font-size: 12px;  
    69.     background-color: #B0C6CE;  
    70.     text-align: center;  
    71.     vertical-align: middle;  
    72.     display: table-caption;  
    73.     border-top-width: thin;  
    74.     border-right-width: thin;  
    75.     border-bottom-width: thin;  
    76.     border-left-width: thin;  
    77.     border-top-style: solid;  
    78.     border-right-style: solid;  
    79.     border-bottom-style: solid;  
    80.     border-left-style: solid;  
    81.     position:absolute;  
    82.     filter:alpha(opacity=0);  
    83.     opacity:0.00;  
    84.     width:400px;  
    85.     height:300px;  
    86. }</style>  
    87. <mce:script type="text/javascript"><!--  
    88.     var hideTime=null;  
    89.     var hide=100;//过滤镜初始值，IE  
    90.     var hideFF=1.0;//过滤镜初始值，FF  
    91.     var show=0;  
    92.     var showFF=0.00;  
    93.     var imgShow=1;  
    94.     var imgSrcArray=new Array("http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0001.jpg","http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0004.jpg","http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0005.jpg");  
    95.   
    96.     function hideObject(hideImage,showImage){  
    97.         try{  
    98.             hide=hide-1;  
    99.             hideFF=hideFF-0.01;  
    100.             show=show+1;  
    101.             showFF=showFF+0.01;  
    102.             hideImage.style.filter="alpha(opacity="+hide+")";  
    103.             hideImage.style.opacity=hideFF+"";/*FF兼容*/  
    104.             //hideImage.style.-moz-opacity=hideFF+"";  
    105.             showImage.style.filter="alpha(opacity="+show+")";  
    106.             showImage.style.opacity=showFF+"";/*FF兼容*/  
    107.             if(hide<=0){  
    108.                 showImage.style.filter="alpha(opacity=100)";  
    109.                 showImage.style.opacity=1.0;/*FF兼容*/  
    110.                 window.clearInterval(hideTime);  
    111.                 hideImage.style.display="none";  
    112.                 window.setTimeout(changeImage,1000);  
    113.             }  
    114.         }catch(e){  
    115.             window.clearInterval(hideTime);  
    116.         }         
    117.     }  
    118.     function changeImage(){  
    119.         hide=100;  
    120.         hideFF=1.0;  
    121.         show=0;  
    122.         showFF=0.0;  
    123.         imgShow++;  
    124.         if(imgShow>imgSrcArray.length){  
    125.             imgShow=1;  
    126.         }  
    127.         var img1=document.getElementById("img1");  
    128.         var img2=document.getElementById("img2");  
    129.         var imageShow,imageHide;  
    130.         if(img1.style.display=="none"){  
    131.             img1.className="imgHide";  
    132.             img2.className="imgShow";  
    133.             img1.style.display="";  
    134.             img1.src=imgSrcArray[imgShow-1];  
    135.             imageShow=img1;  
    136.             imageHide=img2;  
    137.         }else{  
    138.             img2.className="imgHide";  
    139.             img1.className="imgShow";  
    140.             img2.style.display="";  
    141.             img2.src=imgSrcArray[imgShow-1];  
    142.             imageShow=img2;  
    143.             imageHide=img1;  
    144.         }  
    145.           
    146.         hideTime=window.setInterval(function(){hideObject(imageHide,imageShow);},20);  
    147.     }  
    148. // --></mce:script>  
    149. <BODY onload="window.setTimeout(changeImage,1000);">  
    150. <img id="img1" class="imgShow" src="image/1.jpg" mce_src="image/1.jpg"/>  
    151. <img id="img2" class="imgHide" src="image/2.jpg" mce_src="image/2.jpg"/>  
    152. </BODY>  
    153. </HTML> 

posted on 2013-03-12 10:06  AI_JJ  阅读(153)  评论(0)    收藏  举报

导航