1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <style> 8 #div1 { 9 100%; 10 background: url(1.jpeg) center top no-repeat; 11 height: 400px; 12 } 13 14 input { 15 display: block; 16 80px; 17 height: 40px; 18 text-align: center; 19 margin: 0 auto; 20 font-family: "微软雅黑"; 21 } 22 </style> 23 <script> 24 window.onload = function () { 25 var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"]; 26 function show() { 27 var i = Math.ceil(Math.random() * 5);//有几张图片就乘以几 28 document.getElementById("div1").style.backgroundImage = "url(" + imgs[i - 1] + ")" 29 } 30 var timeout = setInterval(show, 1000);//每隔1秒改变一次 31 32 var x = 0; 33 document.getElementById("ip").onclick = function () { 34 document.getElementById("ip").innerHTML = x; 35 x++; 36 if (x % 2 != 0) { 37 this.style.backgroundColor = "#0ff"; 38 clearInterval(timeout); 39 } 40 else { 41 this.style.backgroundColor = "#E1E1E1"; 42 timeout = setInterval(show, 1000); 43 } 44 } 45 } 46 </script> 47 </head> 48 49 <body> 50 <div id="div1"> 51 </div> 52 <div> 53 <input type="button" value="暂停" id="ip" /> 54 </div> 55 </body> 56 </html>