html js制作图片幻灯片效果代码(图片自动轮换)

以下是一个简单的HTML和JavaScript代码示例，用于创建一个幻灯片式的图片轮播效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<style>
  .slider {
    position: relative;
    width: 800px;
    height: 450px;
    margin: auto;
    overflow: hidden;
  }
  .slider img {
    width: 100%;
    height: auto;
    display: none;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="img/image1.jpg" alt="Image 1">
  <img src="img/image2.jpg" alt="Image 2">
  <img src="img/image3.jpg" alt="Image 3">
  <!-- More images can be added here -->
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;

  function changeImage() {
     // 隐藏当前图片 
    images[currentIndex].style.display = 'none';
     // 更新当前图片索引 
    currentIndex = (currentIndex + 1) % imageCount;
    // 显示下一张图片 
    images[currentIndex].style.display = 'block';
  }
 
  setInterval(changeImage, 3000); // 每3秒钟切换一张图片
</script>
 
</body>
</html>

注：把以上代码存放在html文件中，并在同目录中建立名为img的文件夹，然后在img文件中放入3张名为image1.jpg image2.jpg image3.jpg 的图片