使用JS实现轮播图figcaption字幕随图片同步切换的问题求助

问题原因 #

你之前的方案不生效主要有两个问题：

• figcaption标签语法错误，正确的figcaption是双标签，内容写在标签内部，且通常要和<figure>标签配套使用包裹图片
• 没有将字幕的显隐逻辑和轮播图的切换逻辑绑定，单独写两套控制逻辑容易出现不同步的问题，更合理的方式是把单张图片+对应字幕封装为一个轮播单元，统一控制显隐

修正后的代码实现 #

1. HTML 结构修改

将原来的单img结构替换为figure包裹的图片+字幕单元，新增轮播项类名carousel__item和字幕类名carousel__caption：

<div class="carousel">
  <button class="carousel__button carousel__button--back" onclick="plusDivs(+1)">&#10095;</button>
  <div class="carousel__track-container">
    <figure class="carousel__item">
      <img class="carousel__images" src="https://Slide1.jpg?raw=1/A" alt="Description1" width="600px">
      <figcaption class="carousel__caption">Caption1</figcaption>
    </figure>
    <figure class="carousel__item">
      <img class="carousel__images" src="https://Slide2.jpg?raw=1/B" alt="Description2" width="600px">
      <figcaption class="carousel__caption">Caption2</figcaption>
    </figure>
    <figure class="carousel__item">
      <img class="carousel__images" src="https://Slide3.jpg" alt="Description3" width="600px">
      <figcaption class="carousel__caption">Caption3</figcaption>
    </figure>
  </div>
  <button class="carousel__button carousel__button--forward" onclick="plusDivs(-1)">&#10094;</button>
</div>

2. JS 逻辑修改

只需要把原来控制图片显隐的逻辑改成控制carousel__item单元的显隐即可，不需要额外新增独立的字幕控制函数：

var slideIndex = 1;
showDivs(slideIndex); 

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  // 获取所有轮播单元，每个单元包含对应图片和字幕
  var slideItems = document.getElementsByClassName("carousel__item");
  if (n > slideItems.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slideItems.length
  };
  for (i = 0; i < slideItems.length; i++) {
    slideItems[i].style.display = "none";
  }
  slideItems[slideIndex - 1].style.display = "block";
}

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

3. 可选样式补充（按需添加）

可以给字幕添加基础样式调整展示效果：

.carousel__item {
  margin: 0;
}
.carousel__caption {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

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