点滴积累【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下载：
