如何在原生 JS 中构建无缝轮播

2023-11-21 09:43:21

简介

轮播图是动态网站中常见的元素，可用于展示一系列图像、视频或其他内容。原生 JavaScript 允许我们创建自定义轮播图，这些轮播图高度可定制，可满足任何设计或功能需求。

实现

原生 JavaScript 中无缝轮播图的实现涉及以下步骤：

创建 HTML 容器以容纳轮播图的元素。
创建一个 JavaScript 脚本以管理轮播图的功能。
使用 CSS 样式自定义轮播图的视觉外观。

HTML 代码

<div id="carousel">
  <img src="image1.jpg" alt="" />
  <img src="image2.jpg" alt="" />
  <img src="image3.jpg" alt="" />
</div>

JS 代码

// 获取轮播图元素
const carousel = document.getElementById("carousel");

// 获取所有图像元素
const images = carousel.getElementsByTagName("img");

// 当前显示图像的索引
let currentImage = 0;

// 自动切换图像的间隔时间（以毫秒为单位）
const interval = 5000;

// 创建一个自动切换图像的函数
const autoSwitch = () => {
  // 将当前图像隐藏
  images[currentImage].style.display = "none";

  // 如果已经到达最后一张图像，则重置索引为 0
  if (currentImage === images.length - 1) {
    currentImage = 0;
  } else {
    // 否则将索引加 1
    currentImage++;
  }

  // 显示新图像
  images[currentImage].style.display = "block";

  // 设置定时器以在指定间隔后再次调用此函数
  setTimeout(autoSwitch, interval);
};

// 启动自动切换
autoSwitch();

CSS 代码

#carousel {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

#carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#carousel img:first-child {
  display: block;
}