js循环定时变换图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider</title>
<style>
  #slider {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  #slider img {
    width: 100%;
    height: auto;
  }
</style>
</head>
<body>

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

<script>
  const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  let currentIndex = 0;
  const imageElement = document.getElementById('image');

  function changeImage() {
    imageElement.src = images[currentIndex];
    currentIndex = (currentIndex + 1) % images.length;
  }

  setInterval(changeImage, 3000); // Change image every 3 seconds
</script>

</body>
</html>