解释 JavaScript 代码

您能否解释一下此代码的功能和工作原理？

let currentSlide = 0;

function showSlide(index) {
  const slidesWrapper = document.querySelector('.slides-wrapper');
  const slides = document.getElementsByClassName("slide");

  if (index >= slides.length) currentSlide = 0;
  if (index < 0) currentSlide = slides.length - 1;

  slidesWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
}

function nextSlide() {
  currentSlide++;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;
  showSlide(currentSlide);
}

window.onload = function() {
  showSlide(currentSlide);
  setInterval(nextSlide, 3000);
};

您好！ 此 JavaScript 代码会创建一个简单的幻灯片。我们来详细了解一下：

1. currentSlide = 0;：这会初始化一个变量来跟踪当前显示的幻灯片。它从 0（第一张幻灯片）开始。

2. showSlide(index)：这是核心函数。它接受一个 index，表示要显示的幻灯片。

   • document.querySelector('.slides-wrapper')：获取所有幻灯片的容器元素（假定为具有“slides-wrapper”类的 <div>）。
   • document.getElementsByClassName("slide")：获取具有“slide”类的所有元素（可能是各个幻灯片）。
   • if (index >= slides.length) currentSlide = 0;：如果索引超出范围（大于或等于幻灯片数量），则会循环到第一张幻灯片（索引 0）。
   • if (index < 0) currentSlide = slides.length - 1;：同样，如果索引小于 0，则会循环到最后一张幻灯片。
   • slidesWrapper.style.transform =translateX(-${currentSlide * 100}%);：这是关键代码行。它使用 CSS 转换来水平移动 slides-wrapper 元素。每个幻灯片都假定为其容器宽度的 100%。将 currentSlide 乘以 100%，会将容器向左移动，从而显示相应的幻灯片。

3. nextSlide()：此函数会递增 currentSlide 并调用 showSlide() 以显示下一张幻灯片。

4. prevSlide()：此函数会递减 currentSlide 并调用 showSlide() 以显示上一个幻灯片。

5. window.onload = function() { ... }：这可确保代码在整个网页加载完毕后运行。

   • showSlide(currentSlide);：最初显示第一张幻灯片。
   • setInterval(nextSlide, 3000);：设置一个间隔，以便每 3000 毫秒（3 秒）自动调用 nextSlide()，从而实现自动幻灯片效果。

本质上，该代码使用 CSS 转换在幻灯片之间进行平滑过渡，处理环绕行为和自动幻灯片推进。它假定具有容器元素和幻灯片元素的特定 HTML 结构。该 HTML 代码可能如下所示：

<div class="slides-wrapper">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>