首页用html写出一个图片展示自动切换的代码

用html写出一个图片展示自动切换的代码

时间: 2024-01-25 20:04:04 浏览: 26

以下是一个基于HTML和JavaScript的图片轮播展示的自动切换代码示例： ```html <!DOCTYPE html> <html> <head> <title>Image Slider</title> <style> #slider { width: 800px; height: 600px; position: relative; overflow: hidden; } #slider img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="slider"> <img src="path/to/image1.jpg"> <img src="path/to/image2.jpg"> <img src="path/to/image3.jpg"> </div> <script> var index = 0; var imagePaths = ["path/to/image1.jpg", "path/to/image2.jpg", "path/to/image3.jpg"]; var slider = document.getElementById("slider"); setInterval(function() { index = (index + 1) % imagePaths.length; slider.style.backgroundImage = "url('" + imagePaths[index] + "')"; }, 3000); </script> </body> </html> ``` 在这个示例中，使用了一个div元素作为图片容器，每张图片使用img元素展示。在JavaScript中，使用setInterval方法每隔3秒钟自动切换到下一张图片，并将其作为背景图片展示在div元素上。需要注意的是，每张图片的路径需要正确填写。