Swiper.js幻灯片过渡效果实现：CSS/JS配置及状态类操作问询

完全可以通过结合Swiper事件+CSS类切换实现你要的效果，一点都不复杂。下面是具体实现步骤：

1. 搭建HTML结构 #

每个幻灯片包含图片和标题，额外加一个全屏黑屏遮罩层（初始隐藏）：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="slide1.jpg" class="slide-img" alt="幻灯片1">
      <h2 class="slide-title">标题一</h2>
    </div>
    <div class="swiper-slide">
      <img src="slide2.jpg" class="slide-img" alt="幻灯片2">
      <h2 class="slide-title">标题二</h2>
    </div>
    <!-- 更多幻灯片按需添加 -->
  </div>
  <!-- 切换间隙的黑屏遮罩 -->
  <div class="slide-overlay"></div>
</div>

2. 编写CSS样式 #

禁用Swiper默认过渡，定义淡入淡出动画和黑屏状态：

/* 禁用Swiper自带的滑动过渡，用自定义动画替代 */
.swiper-wrapper {
  transition: none !important;
}

/* 幻灯片内元素初始状态：完全透明 */
.slide-img, .slide-title {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* 当前激活的幻灯片：元素淡入 */
.swiper-slide-active .slide-img,
.swiper-slide-active .slide-title {
  opacity: 1;
}

/* 即将离开的幻灯片：元素淡出 */
.swiper-slide-leaving .slide-img,
.swiper-slide-leaving .slide-title {
  opacity: 0;
}

/* 黑屏遮罩基础样式 */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  pointer-events: none; /* 不遮挡交互 */
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* 切换时显示黑屏 */
.slide-overlay.active {
  opacity: 1;
}

3. 配置Swiper并绑定事件 #

利用Swiper的过渡事件，精准控制类的添加/移除，触发动画：

const swiper = new Swiper('.swiper-container', {
  loop: true, // 按需开启循环
  speed: 0, // 关闭Swiper默认过渡速度，让CSS动画主导
  autoplay: {
    delay: 3000, // 自动切换间隔，按需调整
    disableOnInteraction: false,
  },
  on: {
    // 切换开始时：标记当前幻灯片为"离开状态"，显示黑屏
    slideChangeTransitionStart: function() {
      const currentSlide = this.slides[this.activeIndex];
      currentSlide.classList.add('swiper-slide-leaving');
      document.querySelector('.slide-overlay').classList.add('active');
    },
    // 切换结束时：移除离开状态，隐藏黑屏
    slideChangeTransitionEnd: function() {
      const prevSlide = this.slides[this.previousIndex];
      prevSlide.classList.remove('swiper-slide-leaving');
      document.querySelector('.slide-overlay').classList.remove('active');
    }
  }
});

关键逻辑说明 #

• 不用onSlideChange是因为它触发时机偏晚，改用slideChangeTransitionStart和slideChangeTransitionEnd能精准捕捉切换的开始/结束节点。
• 通过自定义swiper-slide-leaving类触发离开幻灯片的淡出，结合Swiper自带的swiper-slide-active类实现新幻灯片的淡入。
• 黑屏遮罩通过active类控制显示，刚好填充两张幻灯片切换的间隙，和目标参考效果一致。

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