使用原生JavaScript、CSS和HTML实现轮播组件遇到问题求助

我正在尝试制作一个carousel（轮播组件），但无法实现滚动效果；尝试过使用特定数据但没有作用。希望实现箭头按钮和圆点按钮的功能，使卡片能够逐张滚动，并且在最后一张卡片后循环回到第一张。

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播组件</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="cont">
    <div class="left">&#139;</div>
    <div class="cont_card">
      <div class="card">1/6</div>
      <div class="card">2/6</div>
      <div class="card">3/6</div>
      <div class="card">4/6</div>
      <div class="card">5/6</div>
      <div class="card">6/6</div>
    </div>
    <div class="right">&#155;</div>
  </div>
  <div class="cont_dot">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cont {
  width: 100%;
  background: #a8a8a8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的卡片 */
}

.cont_card {
  display: flex;
  transition: transform 0.3s ease; /* 添加滚动过渡动画 */
}

.card {
  height: 300px;
  width: 274px;
  background: #08f687;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* 防止卡片被压缩 */
}

.cont_dot {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #000;
  margin: 0 3px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dot.active {
  background: #08f687; /* 激活的圆点高亮 */
}

.right, .left {
  font-size: 50px;
  background: #dcdcee;
  padding: 0 10px;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  user-select: none; /* 防止点击时选中文本 */
}

.right {
  right: 20px;
}

.left {
  left: 20px;
}

JavaScript

const cardContainer = document.querySelector('.cont_card');
const cards = document.querySelectorAll('.card');
const dots = document.querySelectorAll('.dot');
const arrRight = document.querySelector('.right');
const arrLeft = document.querySelector('.left');
const cardWidth = cards[0].offsetWidth + 10; // 卡片宽度+左右margin
let currentIndex = 0;

// 更新圆点激活状态
function updateDots() {
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentIndex);
  });
}

// 滚动到指定索引的卡片
function scrollToCard(index) {
  cardContainer.style.transform = `translateX(-${index * cardWidth}px)`;
  currentIndex = index;
  updateDots();
}

// 右箭头点击事件
arrRight.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % cards.length;
  scrollToCard(currentIndex);
});

// 左箭头点击事件
arrLeft.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + cards.length) % cards.length;
  scrollToCard(currentIndex);
});

// 圆点点击事件
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    scrollToCard(index);
  });
});

// 初始化激活第一个圆点
updateDots();

关键修改说明 #

1. 容器溢出控制：给.cont添加overflow: hidden，隐藏超出可视区域的卡片；给.cont_card添加过渡动画，让滚动更平滑
2. 整体滚动逻辑：通过修改卡片容器的transform: translateX()实现整体滚动，而非单独移动每个卡片，更高效
3. 循环滚动处理：使用取余运算(currentIndex + 1) % cards.length实现循环，左滚动时通过(currentIndex - 1 + cards.length) % cards.length避免索引为负数
4. 圆点状态同步：点击圆点直接跳转到对应卡片，同时更新激活样式；箭头滚动时也同步更新圆点状态
5. 布局优化：调整箭头的位置到容器内，避免布局错乱；给卡片添加flex-shrink: 0防止被压缩

内容的提问来源于stack exchange，提问作者A P I