咨询简化歌词幻灯片实现方案：仅需Div显隐及多交互控制

嘿，我明白你想要的是一个只专注于歌词切换的极简幻灯片——去掉自动播放，只保留手动控制，还要支持点击按钮、方向键、翻页键和鼠标滚轮这些交互方式对吧？完全可以简化实现，不用保留原代码里那些和自动播放相关的冗余部分。下面给你一个更清爽的方案：

核心思路 #

• 用一个全局变量currentIndex跟踪当前显示的歌词项
• 通过CSS类active控制歌词的显示/隐藏，比直接操作DOM样式更易维护
• 所有交互（按钮、键盘、滚轮）最终都调用同一个切换函数，避免重复逻辑
• 加入索引边界处理，防止切换到不存在的歌词

完整实现代码 #

HTML结构 #

<!-- 歌词容器 -->
<div class="lyric-slides">
  <div class="lyric-slide active">夜空中最亮的星</div>
  <div class="lyric-slide">能否听清</div>
  <div class="lyric-slide">那仰望的人</div>
  <div class="lyric-slide">心底的孤独和叹息</div>
  <!-- 可以继续添加更多歌词项 -->
</div>

<!-- 控制按钮 -->
<button class="slide-btn prev-btn">← 上一句</button>
<button class="slide-btn next-btn">下一句 →</button>

CSS样式 #

/* 默认隐藏所有歌词 */
.lyric-slide {
  display: none;
  font-size: 2rem;
  margin: 2rem 0;
  text-align: center;
}

/* 显示激活的歌词 */
.lyric-slide.active {
  display: block;
}

/* 按钮样式（可选，按需调整） */
.slide-btn {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  margin: 0 0.5rem;
  cursor: pointer;
}

JavaScript逻辑 #

// 获取DOM元素
const slides = document.querySelectorAll('.lyric-slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

// 当前显示的歌词索引
let currentIndex = 0;

// 显示指定索引的歌词
function showCurrentSlide() {
  // 先移除所有歌词的active类
  slides.forEach(slide => slide.classList.remove('active'));
  // 给当前索引的歌词添加active类
  slides[currentIndex].classList.add('active');
}

// 切换歌词的通用函数
function changeSlide(direction) {
  // 更新索引，同时处理边界（不循环，停在首尾）
  currentIndex += direction;
  currentIndex = Math.max(0, Math.min(currentIndex, slides.length - 1));
  showCurrentSlide();
}

// 绑定按钮点击事件
prevBtn.addEventListener('click', () => changeSlide(-1));
nextBtn.addEventListener('click', () => changeSlide(1));

// 绑定键盘事件（方向键、翻页键）
document.addEventListener('keydown', (e) => {
  switch(e.key) {
    case 'ArrowLeft':
    case 'PageUp':
      changeSlide(-1);
      e.preventDefault(); // 阻止浏览器默认滚动行为
      break;
    case 'ArrowRight':
    case 'PageDown':
      changeSlide(1);
      e.preventDefault();
      break;
  }
});

// 绑定鼠标滚轮事件
document.addEventListener('wheel', (e) => {
  // 滚轮向下滚动→切换到下一句，向上→上一句
  const direction = e.deltaY > 0 ? 1 : -1;
  changeSlide(direction);
  e.preventDefault();
});

// 初始化显示第一句歌词
showCurrentSlide();

为什么这个方案更简洁？ #

• 去掉了原代码中plusSlides、showSlides这类拆分过细的函数，逻辑更聚合直观
• 用CSS类控制显示状态，避免了大量DOM样式操作
• 所有交互都复用同一个changeSlide函数，减少了重复代码
• 边界处理逻辑集中在一处，后续修改更方便

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