如何使用CSS和JS实现文字幻灯片依次播放并循环回到首屏

1. HTML 调整 #

给所有幻灯片 section 新增统一类名 .slide 方便批量控制，示例如下：

<section class="slide section-a">
  <p class="text"> Knowledge is Power</p>
  <p class="text"> Power is Knowledge </p>
  <p class="text"> Get Educated </p>
  <p class="text"> Stay Positive </p>
</section>

<section class="slide section-b">
  <p class="text"> Book</p>
  <p class="text"> We Trade </p>
  <p class="text"> We Are The best </p>
  <p class="text"> Stay Positive </p>
</section>

<!-- 第三节幻灯片同理添加统一类名 -->
<section class="slide section-c">
  <p class="text"> Third Slide</p>
  <p class="text"> Test Content 1 </p>
  <p class="text"> Test Content 2 </p>
  <p class="text"> Test Content 3 </p>
</section>

2. CSS 调整 #

统一幻灯片基础样式，默认隐藏，仅激活状态可见，所有幻灯片重叠在同一位置：

/* 所有幻灯片通用样式 */
.slide {
  height: 100px;
  width: 90%;
  transition: 1.7s ease;
  margin: auto;
  position: absolute;
  left: 5%;
  top: 50px; /* 可根据需求调整垂直位置 */
  opacity: 0; /* 默认隐藏 */
  pointer-events: none;
}
/* 激活状态的幻灯片显示 */
.slide.active {
  opacity: 1;
  pointer-events: auto;
}

.text {
  color: #000; /* 原代码为#fff，若页面背景为白色可修改为深色方便测试 */
  margin: auto;
  font-size: 3rem;
  transition: all 0.75s ease;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 800;
  text-align: center;
  transform: translateX(120%); /* 入场前默认位置 */
}

3. JS 调整 #

重构为通用轮播逻辑，支持按顺序循环播放所有幻灯片：

window.addEventListener('load', () => {
  const slides = document.querySelectorAll(".slide");
  const delay = 500;
  const perSlideTotalTime = delay * 6; // 单张幻灯片完整播放时长（4段文字入场+淡出的总时间）
  let currentSlideIndex = 0;

  // 播放指定索引的幻灯片
  const playSlide = (index) => {
    const currentSlide = slides[index];
    const textEls = currentSlide.querySelectorAll(".text");
    
    // 重置当前幻灯片所有文字到入场前位置
    textEls.forEach(el => el.style.transform = "translateX(120%)");
    // 激活当前幻灯片
    currentSlide.classList.add("active");

    // 文字逐个入场动画
    textEls.forEach((el, i) => {
      setTimeout(() => {
        el.style.transform = "translate(0%)";
      }, delay * (i + 1))
    })

    // 当前幻灯片播放结束，切换到下一张
    setTimeout(() => {
      currentSlide.classList.remove("active");
      currentSlideIndex = (currentSlideIndex + 1) % slides.length; // 取模实现循环
      playSlide(currentSlideIndex);
    }, perSlideTotalTime)
  }

  // 启动轮播
  playSlide(currentSlideIndex);
});

逻辑说明 #

• 所有幻灯片默认重叠在同一位置，只有添加了.active类的幻灯片会显示
• 每次播放新幻灯片时，会先重置该幻灯片下所有文字的位置，保证每次入场动画正常触发
• 单张幻灯片播放完成后自动切换到下一张，索引取模总数量实现无限循环，播放到最后一张后自动回到第一张

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