效果：
思路：首先获得图片数组，然后做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
时间： 2024-10-12 21:41:02