使用JavaScript数组构建可循环的图片轮播组件

<main>
  <section class="slides">
    <div class="slide active">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
  </section>
  <menu class="ctrl">
    <button class="prev"><</button>
    <button class="next">></button>
  </menu>
</main>

html {
  font: 300 3vmin/1 Consolas;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 确保body至少占满视口高度 */
  margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: max-content;
}

.slides {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 420px; /* 轮播区域宽度 */
  height: 400px; /* 轮播区域高度 */
  overflow: hidden; /* 隐藏超出容器的幻灯片 */
}

.slide {
  display: grid;
  place-items: center;
  position: absolute; /* 绝对定位，使幻灯片堆叠 */
  top: 50%;
  left: 50%;
  width: 400px;
  height: 350px;
  border-radius: 20px;
  font-size: 50px;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  visibility: hidden; /* 默认隐藏所有幻灯片 */
  transform: translate(-50%, -50%); /* 居中定位 */
  transition: visibility 0.3s ease-in-out; /* 添加过渡效果 */
}

.active {
  visibility: visible; /* 只有带有active类的幻灯片才可见 */
}

/* 为每张幻灯片设置不同的背景颜色 */
.slide:first-of-type {
  background-color: #F7EC09;
}

.slide:nth-of-type(2) {
  background-color: #3EC70B;
}

.slide:nth-of-type(3) {
  background-color: #3B44F6;
}

.slide:nth-of-type(4) {
  background-color: #A149FA;
}

.ctrl {
  display: flex;
  justify-content: space-between;
  position: absolute; /* 按钮绝对定位在轮播区域旁边 */
  top: 45%;
  left: 45%;
  width: 150%; /* 按钮容器宽度，使其超出轮播区域 */
  transform: translate(-50%, -50%);
}

.next,
.prev {
  border: none;
  font-size: 100px;
  font-weight: 700;
  background: none;
  cursor: pointer;
  color: #333; /* 按钮颜色 */
}

// 获取导航按钮元素
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

/*
  收集所有带有 .slide 类的元素，并将其转换为数组
  定义数组的长度 (幻灯片总数)
  定义一个全局变量 index，用于追踪当前显示的幻灯片索引
*/
let slides = [...document.querySelectorAll('.slide')];
let size = slides.length;
let index = 0; // 初始显示第一张幻灯片（索引为0）

// 确保初始时第一张幻灯片是激活状态
if (!slides[index].classList.contains('active')) {
  slides[index].classList.add('active');
}

// 绑定点击事件到“上一张”按钮
prev.onclick = event => move(index - 1);
// 绑定点击事件到“下一张”按钮
next.onclick = event => move(index + 1);

/*
  move 函数负责处理幻灯片的切换逻辑
  to 参数是目标幻灯片的索引
*/
function move(to) {
  // 核心循环逻辑：使用三元表达式链来确定新的索引
  // 如果目标索引 >= 幻灯片总数，则回到第一张 (0)
  // 如果目标索引 < 0，则回到最后一张 (size - 1)
  // 否则，使用目标索引本身
  to = to >= size ? 0 : to < 0 ? size - 1 : to;

  // 移除当前激活幻灯片的 'active' 类
  slides[index].classList.toggle("active");
  // 为目标幻灯片添加 'active' 类
  slides[to].classList.toggle("active");
  // 更新当前幻灯片的索引
  index = to;
}