如何用JavaScript实现Bootstrap轮播图的文本联动过渡效果？

一、解决标题&描述同步切换问题 #

你之前用forEach循环遍历数组赋值的方式，会一次性覆盖所有内容，最终只显示数组最后一项，且未绑定轮播切换事件，导致无法同步更新。下面是正确的实现方案：

完整代码示例 #

HTML结构

<!-- 轮播容器 -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="7000">
  <!-- 标题占位符 -->
  <h3 id="carouselTitle">初始标题</h3>
  <!-- 轮播图片容器 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="图片1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="图片2">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="图片3">
    </div>
  </div>
  <!-- 轮播控制按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </button>
  <!-- 描述占位符 -->
  <p id="carouselDesc">初始描述</p>
</div>

<!-- Bootstrap CDN引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

JavaScript逻辑

// 获取核心元素
const carousel = document.getElementById('carouselExample');
const titleEl = document.getElementById('carouselTitle');
const descEl = document.getElementById('carouselDesc');

// 标题、描述数组
const titles = ['春日花海', '夏日海滩', '秋日枫林'];
const descriptions = ['漫山遍野的油菜花，治愈整个春天', '碧蓝的海水与沙滩，享受夏日清凉', '层林尽染的枫林，邂逅秋日浪漫'];

// 初始化显示第一个内容
titleEl.innerHTML = titles[0];
descEl.innerHTML = descriptions[0];

// 监听轮播滑动完成事件
carousel.addEventListener('slid.bs.carousel', function (event) {
  // 获取当前激活轮播项的索引
  const currentIndex = event.to;
  // 同步赋值对应标题和描述
  titleEl.innerHTML = titles[currentIndex];
  descEl.innerHTML = descriptions[currentIndex];
});

核心原理 #

通过监听Bootstrap轮播的slid.bs.carousel事件（滑动完成后触发），获取当前轮播项的索引，再从数组中匹配对应内容赋值给占位符，实现和图片的同步切换。

二、过渡动画实现 #

Bootstrap轮播自带过渡效果，也可以自定义动画：

方式1：使用Bootstrap自带淡入淡出效果 #

只需给轮播容器添加carousel-fade类：

<div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="7000">

即可实现图片切换时的淡入淡出过渡，无需额外JS。

方式2：自定义过渡动画 #

如果需要个性化效果，可通过CSS修改过渡属性，比如添加缩放+淡入效果：

.carousel-item {
  /* 自定义过渡时长和曲线 */
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: scale(1.05);
  opacity: 0.8;
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: scale(0.95);
  opacity: 0.8;
}

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