首页帮我生成一段包含javascript，html，css的自动轮播代码

帮我生成一段包含javascript，html，css的自动轮播代码

时间: 2023-03-14 14:15:34 浏览: 86

可以使用下面的代码实现自动轮播：<html> <head> <title>自动轮播</title> <style type="text/css"> /* 样式 */ #slideshow { margin: 50px auto; position: relative; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } </style> </head> <body>  <div id="slideshow"> <div> <img src="1.jpg" width="240" height="240"> </div> <div> <img src="2.jpg" width="240" height="240"> </div> <div> <img src="3.jpg" width="240" height="240"> </div> </div> <script type="text/javascript"> // 自动轮播 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("slides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // 每 2 秒钟切换一次 } </script> </body> </html>

阅读全文