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

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

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

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

view plain copy to clipboard print ?

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");  
49.   
50.     function hideObject(hideImage,showImage){  
51.         try{  
52.             hide hide =hide-1;  
53.             hideFF hideFF =hideFF-0.01;  
54.             show show =show+1;  
55.             showFF showFF =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 >   
103.   
104. < img   class = "imgShow"   id = "img1"   src = "/image/1.jpg" >   
105. < img   class = "imgHide"   id = "img2"   src = "/image/2.jpg" >   
106.   
107.   
108. < pre > </ pre >   

.imgShow{
	font-size: 12px;
	background-color: #B0C6CE;
	text-align: center;
	vertical-align: middle;
	display: table-caption;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	position:absolute;
	width:400px;
	height:300px;
}
.imgHide{
	font-size: 12px;
	background-color: #B0C6CE;
	text-align: center;
	vertical-align: middle;
	display: table-caption;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	position:absolute;
	filter:alpha(opacity=0);
	opacity:0.00;
	width:400px;
	height:300px;
}

<script></script>