点滴积累【JS】---JS实现动画闪烁效果

效果：
思路：首先获得图片数组，然后做JS定时用setTimeout和setInterval在用显示隐藏实现闪烁效果。
代码：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         //图片数组
 7         var imgNumber = [];
 8         //20160815添加动画效果
 9         function Init() {
10             for (var i = 1; i <= 5; i++) {
11                 imgNumber[i] = "image" + i;
12             }
13         }
14         //定时执行
15         window.setTimeout(aniFun, 1000);
16         //当前图片序号
17         var curNumber = 0;
18         var f = "";
19         var showOrHide = "";
20         //动画效果
21         function aniFun() {
22 
23             //添加图片闪烁效果
24             showOrHideImage();
25             window.setTimeout(aniDo, 500);
26         }
27         //图片闪烁效果
28         function showOrHideImage() {
29             //循环执行
30             window.setTimeout(hideAllImage, 100);
31             window.setTimeout(showAllImage, 200);
32             //循环执行
33             window.setTimeout(hideAllImage, 300);
34             window.setTimeout(showAllImage, 400);
35         }
36         //执行动画
37         function aniDo() {
38             hideAllImage();
39             curNumber = 0;
40             //循环执行，
41             f = window.setInterval(showImage, 500);
42         }
43         //隐藏所有图片
44         function hideAllImage() {
45             //隐藏所有图片
46             for (var i = 1; i <= 5; i++) {
47                 if (typeof (document.getElementById(imgNumber[i])) != "undefined") {
48                     document.getElementById(imgNumber[i]).style.display = "none";
49                 }
50             }
51         }
52         //显示所有图片
53         function showAllImage() {
54             //显示所有图片
55             for (var i = 1; i <= 5; i++) {
56                 if (typeof (document.getElementById(imgNumber[i])) != "undefined") {
57                     document.getElementById(imgNumber[i]).style.display = "block";
58                 }
59             }
60         }
61         //显示逐个图片
62         function showImage() {
63             curNumber++;
64             //显示逐个图片
65             if (curNumber <= 5) {
66                 if (typeof (document.getElementById(imgNumber[curNumber])) != "undefined") {
67                     document.getElementById(imgNumber[curNumber]).style.display = "block";
68                 }
69             }
70             else if (curNumber > 6) {
71                 window.clearInterval(f);
72                 aniFun();
73             }
74         } 
75     </script>
76 </head>
77 <body onload="Init();">
78     <div style="margin-left: 400px; margin-top: 100px;">
79     青苹果图片闪烁
80         <img id="image1" style="display: block" src="Image/111.png" />
81         <img id="image2" style="display: block" src="Image/222.png" />
82         <img id="image3" style="display: block" src="Image/333.png" />
83         <img id="image4" style="display: block" src="Image/444.png" />
84         <img id="image5" style="display: block" src="Image/555.png" />
85     </div>
86 </body>
87 </html>
Demo下载：
http://files.cnblogs.com/files/xinchun/ShowOrHide.zip