<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Picture timed switch</title> <style> img { height: 460px; width: 1200px; position: absolute; } .box { margin: 0 auto; width: 1200px; margin-top: 100px; } </style> </head> <body> <div class="box"> <!-- 这个img图片作为背景 --> <img src="./img/site-hero-shoujimiaoshari.jpg" alt=""> <img id="aa" alt=""> </div> <script> // urls里面为四张图片的路径 var urls = [" ./img/32xiaomidianshi.jpg", "./img/yongxinzuodao.jpg", "./img/xiaomiMIX3.jpg", "./img/thanksgiving.jpg" ]; //获取img var aa = document.getElementById('aa'); var i = 0; // 定时器setInterval(函数,时间)：每隔指定时间（毫秒）执行函数一次 setInterval(function () { aa.src = urls[i]; // 下面两种都是判读方式，如果切换到最后一张，又从第一张开始 // i >= urls.length ? i=0: i++; if (i >= urls.length) { i = 0; } else { i++; } }, 2000);//这里间隔两秒切换一次图片
//最终版权归我的授课老师彭老师所有！ </script> </body> </html>