实现滑块组件中图片与文本内容的同步切换

嘿，刚学编程几个月就能写出图片切换的滑块组件，已经很厉害了！咱们现在只需要把幻灯片的图片、标题、序号信息绑定在一起，就能实现同步切换的功能啦，我来一步步帮你完善代码：

核心思路 #

之前你是单独用数组存图片路径，现在咱们把每一张幻灯片的图片、标题、序号放在同一个对象里，这样切换索引的时候，就能一次性拿到对应所有信息，然后同步更新到页面上。

具体修改步骤 #

1. 重构幻灯片数据结构 #

把原来的图片数组改成包含完整信息的对象数组，每个对象对应一张幻灯片的所有内容：

// 替换原来的images数组
let slides = [
  {
    img: "carousel1.jpg",
    title: "Soggiorno",
    number: "01"
  },
  {
    img: "carousel2.jpg",
    title: "第二张幻灯片标题",
    number: "02"
  },
  {
    img: "carousel3.jpg",
    title: "第三张幻灯片标题",
    number: "03"
  },
  {
    img: "carousel4.jpg",
    title: "第四张幻灯片标题",
    number: "04"
  },
  {
    img: "carousel5.jpg",
    title: "第五张幻灯片标题",
    number: "05"
  },
  {
    img: "carousel6.jpg",
    title: "第六张幻灯片标题",
    number: "06"
  },
  {
    img: "carousel7.jpg",
    title: "第七张幻灯片标题",
    number: "07"
  }
];
let i = 0; // 当前幻灯片索引（和之前保持一致）

2. 获取需要更新的DOM元素 #

除了图片，还要获取标题和序号的DOM节点，方便后续更新：

// 原来的sliderImage保留，新增下面两个
let sliderImage = document.querySelector(".sliderImage");
let sliderTitle = document.querySelector(".carousel__card-title");
let slideNumber = document.querySelector(".slide__number");

3. 替换旧的切换逻辑，新增同步更新函数 #

把原来的getSlideImg改成updateSlide，让它负责同步更新图片、标题和序号；然后修改prev和next函数调用这个新函数：

function prev() {
  if (i <= 0) i = slides.length;
  i--;
  updateSlide(); // 调用更新函数
}

function next() {
  if (i >= slides.length - 1) i = -1;
  i++;
  updateSlide(); // 调用更新函数
}

// 同步更新所有幻灯片内容的函数
function updateSlide() {
  // 更新图片
  sliderImage.setAttribute("src", "img/" + slides[i].img);
  // 更新标题
  sliderTitle.textContent = slides[i].title;
  // 更新序号
  slideNumber.textContent = slides[i].number;
}

4. 初始化页面内容 #

页面加载完成后，调用一次updateSlide，确保初始显示的内容和第一张幻灯片匹配：

// 页面加载完成后初始化
window.onload = function() {
  updateSlide();
};

完整的可运行代码 #

整合后的完整代码如下（HTML部分不需要修改，只需要替换JS部分）：

<!-- Carousel -->
<div class="carousel-container">
  <div class="carousel-slide">
    <img src="./img/carousel1.jpg" alt="" class="sliderImage"/>
    <!-- Carousel card -->
    <div class="carousel__card-container">
      <div class="carousel__card-title">Soggiorno</div>
      <div class="carousel__slide-data">
        <div class="slide__number">01</div>
        <div class="slide__loader">
          <div class="loader__line-grey">
            <div class="loader__line-white"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Carousel buttons -->
    <div class="carousel-btn">
      <a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
        <i class="ri-arrow-left-s-line btn-icon-small"></i>
      </a>
      <a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
        <i class="ri-arrow-right-s-line btn-icon-small"></i>
      </a>
    </div>
  </div>
</div>

<script>
// Carousel
let slides = [
  {
    img: "carousel1.jpg",
    title: "Soggiorno",
    number: "01"
  },
  {
    img: "carousel2.jpg",
    title: "第二张幻灯片标题",
    number: "02"
  },
  {
    img: "carousel3.jpg",
    title: "第三张幻灯片标题",
    number: "03"
  },
  {
    img: "carousel4.jpg",
    title: "第四张幻灯片标题",
    number: "04"
  },
  {
    img: "carousel5.jpg",
    title: "第五张幻灯片标题",
    number: "05"
  },
  {
    img: "carousel6.jpg",
    title: "第六张幻灯片标题",
    number: "06"
  },
  {
    img: "carousel7.jpg",
    title: "第七张幻灯片标题",
    number: "07"
  }
];
let i = 0; // 当前幻灯片索引

// 获取DOM元素
let sliderImage = document.querySelector(".sliderImage");
let sliderTitle = document.querySelector(".carousel__card-title");
let slideNumber = document.querySelector(".slide__number");

// 切换函数
function prev() {
  if (i <= 0) i = slides.length;
  i--;
  updateSlide();
}
function next() {
  if (i >= slides.length - 1) i = -1;
  i++;
  updateSlide();
}

// 同步更新幻灯片内容
function updateSlide() {
  sliderImage.setAttribute("src", "img/" + slides[i].img);
  sliderTitle.textContent = slides[i].title;
  slideNumber.textContent = slides[i].number;
}

// 初始化页面
window.onload = updateSlide;
</script>

这样修改之后，点击「上一张」或「下一张」按钮时，图片、标题和序号就会同步切换啦！你只需要把对象数组里的title换成你实际需要的内容就可以了。

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