原生 JavaScript 实现轮播图：第一章，图片展示

2024-01-03 21:26:47

引言

轮播图作为一种广泛应用于网站和移动应用程序的视觉呈现形式，在吸引用户注意力、展示关键信息方面发挥着至关重要的作用。原生 JavaScript 作为一种强大的网络开发语言，提供了实现复杂交互式元素所需的灵活性。在本系列的第一章中，我们将深入探讨如何使用原生 JavaScript 创建一个功能齐全的轮播图，重点关注图片展示。

图片容器和列表

创建轮播图的第一步是定义一个容器元素来容纳图片。我们可以使用 HTML 的 <div> 元素，为其分配一个适当的 id，如下所示：

<div id="carousel-container"></div>

接下来，我们需要创建一个图片列表，这些图片将作为轮播图的内容。我们可以使用 JavaScript 的 createElement() 方法动态创建这些图片元素：

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

images.forEach((image) => {
  const img = document.createElement("img");
  img.src = image;
  document.getElementById("carousel-container").appendChild(img);
});

图片切换

实现轮播图的关键在于切换图片。我们可以使用 CSS 的 display 属性在显示和隐藏图片之间切换。以下是实现图片切换逻辑的 JavaScript 代码：

let currentImageIndex = 0;

function showImage(index) {
  const images = document.getElementById("carousel-container").children;
  for (let i = 0; i < images.length; i++) {
    images[i].style.display = i === index ? "block" : "none";
  }
}

这个 showImage() 函数接受一个索引作为参数，用于指定要显示的图片。它遍历所有图片元素并根据提供的索引显示或隐藏它们。

自动播放

为了让轮播图自动滚动，我们可以使用 JavaScript 的 setInterval() 函数，以指定的时间间隔调用 showImage() 函数。以下是实现自动播放逻辑的代码：

const interval = setInterval(() => {
  currentImageIndex = (currentImageIndex + 1) % images.length;
  showImage(currentImageIndex);
}, 3000); // 3 秒后切换图片

交互控制

最后，为了让用户可以控制轮播图，我们可以添加按钮或圆点，用于手动切换图片。以下是实现手动切换逻辑的代码：

const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", () => {
  currentImageIndex = (currentImageIndex + 1) % images.length;
  showImage(currentImageIndex);
});

我们还可以使用类似的方法添加一个上一个按钮和底部提示圆点。