代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div img { position: absolute; width: 100%; height: 200px; transition: all; transition-duration: 0.5s; } .carousel { position: relative; } </style></head><body> <div class="carousel"> <img src="./imgs/1.jpeg" alt="" id="1"> <img src="./imgs/2.jpeg" alt="" id="2"> <img src="./imgs/3.jpeg" alt="" id="3"> </div> <script> window.onload = function () { let img1 = document.getElementById("1") let img2 = document.getElementById("2") let img3 = document.getElementById("3") let img_box = document.getElementsByTagName("div","tag")[0] console.log(img_box) let img_list = [img1,img2,img3] img_list[0].style.left = "340px" img_list[1].style.left = "-200px" img_list[2].style.left = "0px" setInterval(() => { img_list[0].style.left = "680px" img_list[2].style.left = "340px" img_list[1].style.left = "0px" img_list[0].style.display = "none" img_list[0].style.left = "-340px" setTimeout(()=>{ img_list[0].style.display = "" img_list.unshift(img_list.pop()) },450) }, 3000) } </script></body></html>外围是保护一个队列和相对定位的个性。通过调整left的宽度实现轮播。本轮播图没有对响应性进行适配，最佳宽度是356px。