效果：
思路：首先獲得圖片數組，然后做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下載：