首页写一段heml代码实现图片滚动播放

写一段heml代码实现图片滚动播放

时间: 2023-06-08 17:03:46 浏览: 66

好的，以下是一个简单的使用 HTML 与 JavaScript 实现图片滚动播放的示例代码： ```html <!DOCTYPE html> <html> <head> <title>图片滚动播放</title> <style> #container { overflow: hidden; } #slider { display: flex; transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .slide { flex: 1 0 100%; } .slide img { max-width: 100%; height: auto; } </style> </head> <body> <div id="container"> <div id="slider"> <div class="slide"><img src="img1.jpg"></div> <div class="slide"><img src="img2.jpg"></div> <div class="slide"><img src="img3.jpg"></div> <div class="slide"><img src="img4.jpg"></div> <div class="slide"><img src="img5.jpg"></div> </div> </div> <script> const slider = document.querySelector("#slider"); const slides = document.querySelectorAll(".slide"); let currentSlide = 0; const slideWidth = slides[0].clientWidth; let intervalId; function slide() { currentSlide++; if (currentSlide >= slides.length) { currentSlide = 0; } slider.style.transform = `translateX(-${currentSlide * slideWidth}px)`; } function start() { intervalId = setInterval(slide, 3000); } function stop() { clearInterval(intervalId); } start(); </script> </body> </html> ``` 注：该示例代码实现了一个简单的图片滚动播放功能，通过 JavaScript 控制轮播图的滚动，每 3 秒自动滚动到下一张图片。其中包含了一个包含 5 张图片的轮播图，你可以将 `img1.jpg` 至 `img5.jpg` 替换成你自己的图片。