JS随机抽取图片

 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             width: 100%;
10             background: url(1.jpeg) center top no-repeat;
11             height: 400px;
12         }
13 
14         input {
15             display: block;
16             width: 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>

 

posted @ 2018-01-19 17:08  你的斗志并没有失去  阅读(1001)  评论(0编辑  收藏  举报