多张图片实现幻灯片切换

JudyEdith 2024-07-03 09:58:17

以下是一个使用 HTML、CSS 和 JavaScript 实现多张图片幻灯片切换的示例代码：HTML:

<!DOCTYPE html>
<html>
<head>
  <title>幻灯片切换</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.slider {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.slider img.active {
  opacity: 1;
}

JavaScript (script.js):

const images = document.querySelectorAll('.slider img');
let currentIndex = 0;

function showImage(index) {
  images.forEach((image, i) => {
    if (i === index) {
      image.classList.add('active');
    } else {
      image.classList.remove('active');
    }
  });
}

function nextImage() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  showImage(currentIndex);
}

setInterval(nextImage, 5000); // 每隔 5 秒切换到下一张图片

在上述代码中，我们创建了一个包含多张图片的幻灯片容器。通过 CSS，我们将图片设置为不透明，并在切换时添加过渡效果。

然后，在 JavaScript 中，我们使用 querySelectorAll 方法获取所有图片元素，并定义了一个函数 showImage 来显示指定索引的图片。通过循环遍历图片，将当前图片设置为可见，其他图片设置为不可见。

接下来，我们定义了一个 nextImage 函数，用于切换到下一张图片。通过递增索引，并在超出图片数量时重置为 0，实现循环切换。

最后，使用 setInterval 方法每隔 5 秒调用一次 nextImage 函数，实现自动切换图片的效果。

...全文