html前端自动动态切换图片完整代码

以下是一个简单的 HTML、CSS 和 JavaScript 代码，用于在前端自动动态切换图片：

HTML:

<div class="image-slider">
  <img src="image1.jpg" alt="Image 1" id="slider-image">
</div>

CSS:

.image-slider {
  position: relative;
  width: 100%;
  height: 400px;
}

.image-slider img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

JavaScript:

var images = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
];

var currentIndex = 0;
var sliderImage = document.getElementById("slider-image");

setInterval(function() {
  currentIndex++;
  if (currentIndex == images.length) {
    currentIndex = 0;
  }
  sliderImage.src = images[currentIndex];
}, 3000);

这段代码会在 `div` 元素中显示一张图片，并且在每 3 秒钟自动切换到下一张图片。你可以将 `images` 数组中的图片路径替换为你自己的图片路径。