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

1. <style>
2. .imgShow{
3.     font-size: 12px;
4.     background-color: #B0C6CE;
5.     text-align: center;
6.     vertical-align: middle;
7.     display: table-caption;
8.     border-top-width: thin;
9.     border-right-width: thin;
10.     border-bottom-width: thin;
11.     border-left-width: thin;
12.     border-top-style: solid;
13.     border-right-style: solid;
14.     border-bottom-style: solid;
15.     border-left-style: solid;
16.     position:absolute;
17.     width:400px;
18.     height:300px;
19. }
20. .imgHide{
21.     font-size: 12px;
22.     background-color: #B0C6CE;
23.     text-align: center;
24.     vertical-align: middle;
25.     display: table-caption;
26.     border-top-width: thin;
27.     border-right-width: thin;
28.     border-bottom-width: thin;
29.     border-left-width: thin;
30.     border-top-style: solid;
31.     border-right-style: solid;
32.     border-bottom-style: solid;
33.     border-left-style: solid;
34.     position:absolute;
35.     filter:alpha(opacity=0);
36.     opacity:0.00;
37.     width:400px;
38.     height:300px;
39. }
40. </style>
41. <script>
42.     var hideTime=null;
43.     var hide=100;//过滤镜初始值，IE
44.     var hideFF=1.0;//过滤镜初始值，FF
45.     var show=0;
46.     var showFF=0.00;
47.     var imgShow=1;
48.     var imgSrcArray=new Array("https://p-blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0001.jpg","https://p-blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0004.jpg","https://p-blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0005.jpg");
50.     function hideObject(hideImage,showImage){
51.         try{
52.             hidehide=hide-1;
53.             hideFFhideFF=hideFF-0.01;
54.             showshow=show+1;
55.             showFFshowFF=showFF+0.01;
56.             hideImage.style.filter="alpha(opacity="+hide+")";
57.             hideImage.style.opacity=hideFF+"";/*FF兼容*/
58.             //hideImage.style.-moz-opacity=hideFF+"";
59.             showImage.style.filter="alpha(opacity="+show+")";
60.             showImage.style.opacity=showFF+"";/*FF兼容*/
61.             if(hide<=0){
62.                 showImage.style.filter="alpha(opacity=100)";
63.                 showImage.style.opacity=1.0;/*FF兼容*/
64.                 window.clearInterval(hideTime);
65.                 hideImage.style.display="none";
66.                 window.setTimeout(changeImage,1000);
67.             }
68.         }catch(e){
69.             window.clearInterval(hideTime);
70.         }       
71.     }
72.     function changeImage(){
73.         hide=100;
74.         hideFF=1.0;
75.         show=0;
76.         showFF=0.0;
77.         imgShow++;
78.         if(imgShow>imgSrcArray.length){
79.             imgShow=1;
80.         }
81.         var img1=document.getElementById("img1");
82.         var img2=document.getElementById("img2");
83.         var imageShow,imageHide;
84.         if(img1.style.display=="none"){
85.             img1.className="imgHide";
86.             img2.className="imgShow";
87.             img1.style.display="";
88.             img1.src=imgSrcArray[imgShow-1];
89.             imageShow=img1;
90.             imageHide=img2;
91.         }else{
92.             img2.className="imgHide";
93.             img1.className="imgShow";
94.             img2.style.display="";
95.             img2.src=imgSrcArray[imgShow-1];
96.             imageShow=img2;
97.             imageHide=img1;
98.         }
99.         
100.         hideTime=window.setInterval(function(){hideObject(imageHide,imageShow);},20);
101.     }
102. </script>
104. <img class="imgShow" id="img1" src="/image/1.jpg">
105. <img class="imgHide" id="img2" src="/image/2.jpg">
108. <pre></pre>

http://blog.csdn.net/lip009/archive/2008/07/26/2712344.aspx