JS随机抽取图片

1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 5     <title></title>
6 6     <meta charset="utf-8" />
7 7     <style>
8 8         #div1 {
9 9             width: 100%;
1010             background: url(1.jpeg) center top no-repeat;
1111             height: 400px;
1212         }
1313 
1414         input {
1515             display: block;
1616             width: 80px;
1717             height: 40px;
1818             text-align: center;
1919             margin: 0 auto;
2020             font-family: "微软雅黑";
2121         }
2222     </style>
2323     <script>
2424         window.onload = function () {
2525             var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
2626             function show() {
2727                 var i = Math.ceil(Math.random() * 5);//有几张图片就乘以几
2828                 document.getElementById("div1").style.backgroundImage = "url(" + imgs[i - 1] + ")"
2929             }
3030             var timeout = setInterval(show, 1000);//每隔1秒改变一次
3131 
3232             var x = 0;
3333             document.getElementById("ip").onclick = function () {              
3434                 document.getElementById("ip").innerHTML = x;
3535                 x++;
3636                 if (x % 2 != 0) {
3737                     this.style.backgroundColor = "#0ff";
3838                     clearInterval(timeout);
3939                 }
4040                 else {
4141                     this.style.backgroundColor = "#E1E1E1";
4242                     timeout = setInterval(show, 1000);
4343                 }
4444             }
4545         }
4646     </script>
4747 </head>
4848 
4949 <body>
5050     <div id="div1">
5151     </div>
5252     <div>
5353         <input type="button" value="暂停" id="ip" />
5454     </div>
5555 </body>
5656 </html>

评论区

加载中...

JS随机抽取图片

评论区

相关推荐