如何为已实现的CSS动画轮播图添加上一页、下一页箭头按钮？

嘿，你的CSS动画轮播做得很巧妙！要添加上下页箭头按钮的话，我们需要在HTML里加控制元素，用CSS美化，再写一点JavaScript来手动控制轮播的位置。下面是一步步的实现方案：

首先在你的#slider容器里添加两个按钮，分别用于上一页和下一页控制：

<div id="slider">
  <button id="prevBtn">←</button>
  <button id="nextBtn">→</button>
  <figure>
    <img src="images/slides/1.jpg" alt="Slide 1">
    <img src="images/slides/2.jpg" alt="Slide 2">
    <img src="images/slides/3.jpg" alt="Slide 3">
    <img src="images/slides/4.jpg" alt="Slide 4">
    <img src="images/slides/5.jpg" alt="Slide 5">
  </figure>
</div>

（我把图片的alt属性补全了，这样更符合语义化规范哦）

给按钮设置定位和美化样式，让它们悬浮在轮播图两侧：

/* 按钮基础样式 */
#prevBtn, #nextBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 1rem 1.2rem;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

#prevBtn:hover, #nextBtn:hover {
  background: rgba(0,0,0,0.8);
}

/* 左按钮定位 */
#prevBtn {
  left: 10px;
}

/* 右按钮定位 */
#nextBtn {
  right: 10px;
}

/* 给slider添加相对定位，让按钮的绝对定位基于它 */
div#slider {
  overflow: hidden;
  position: relative; /* 新增这行 */
}

原来的轮播是靠CSS动画自动播放，现在我们需要JS来手动切换轮播项，同时处理自动播放和手动控制的衔接：

// 获取DOM元素
const slider = document.getElementById('slider');
const figure = slider.querySelector('figure');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const slides = figure.querySelectorAll('img');
const slideCount = slides.length;
let currentIndex = 0;
const slideWidth = 100; // 每张图对应的总宽度偏移比例

// 暂停/播放动画的函数
function toggleAnimation(isPlaying) {
  figure.style.animationPlayState = isPlaying ? 'running' : 'paused';
}

// 切换到指定索引的轮播项
function goToSlide(index) {
  // 处理循环逻辑：索引不能超出范围
  if (index < 0) {
    currentIndex = slideCount - 1;
  } else if (index >= slideCount) {
    currentIndex = 0;
  } else {
    currentIndex = index;
  }
  // 设置figure的left偏移量
  figure.style.left = `-${currentIndex * slideWidth}%`;
  // 重置动画，让自动播放从当前页重新开始计时
  figure.style.animation = 'none';
  setTimeout(() => {
    figure.style.animation = '30s slidy infinite';
  }, 10);
}

// 上一页点击事件
prevBtn.addEventListener('click', () => {
  toggleAnimation(false); // 点击时暂停动画
  goToSlide(currentIndex - 1);
});

// 下一页点击事件
nextBtn.addEventListener('click', () => {
  toggleAnimation(false);
  goToSlide(currentIndex + 1);
});

// 鼠标悬停时暂停动画，离开时继续
slider.addEventListener('mouseenter', () => {
  toggleAnimation(false);
});

slider.addEventListener('mouseleave', () => {
  toggleAnimation(true);
});

• 给#slider添加position: relative，确保按钮的绝对定位是相对于轮播容器，而非整个页面；
• 点击按钮时暂停动画，切换完成后重置动画，让自动播放从当前选中的轮播项重新计时；
• 增加了鼠标悬停暂停的逻辑，提升用户体验，避免用户查看内容时轮播突然切换；
• 处理了循环切换逻辑：第一张点击上一页跳转到最后一张，最后一张点击下一页跳转到第一张。

这样修改后，你的轮播图就同时支持自动播放和手动按钮控制啦！

内容的提问来源于stack exchange，提问作者noonecan catch