javascript - 每张图像上都有特定文本的幻灯片

Question

所以我用 HTML/CSS/JS 制作了这个小幻灯片，我想为 6 个图像中的每一个添加文本，但我不知道如何做到这一点，因为我只能更改第一个图像的文本。任何帮助表示赞赏。非常感谢。

var imagecount = 1;
var total = 6;

function slide(x) {
  var Image = document.getElementById('img');
  imagecount = imagecount + x;
  if (imagecount > total) {
    imagecount = 1;
  }
  if (imagecount < 1) {
    imagecount = total;
  }
  Image.src = "images/img" + imagecount + ".jpg";
}

window.setInterval(function slideA(x) {
  var Image = document.getElementById('img');
  imagecount = imagecount + 1;
  if (imagecount > total) {
    imagecount = 1;
  }
  if (imagecount < 1) {
    imagecount = total;
  }
  Image.src = "images/img" + imagecount + ".jpg";
}, 3000);

#container {
  height: 450px;
  width: 650px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  border-radius: 10px;
}
#img {
  height: 450px;
  width: 650px;
}
#left_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
}
#right_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.left {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  left: 0px;
}
.right {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  right: 0px;
}
#text1 {
  position: absolute;
  color: #fff;
  font-size: 32px;
  background-color: #000;
  opacity: 0.5;
  left: 37%;
  z-index: 2;
}

<div id="container">
  <div id="text1">Text</div>
  <img src="images/img1.jpg" id="img" />
  <div id="left_holder">
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
  </div>
  <div id="right_holder">
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" />
  </div>
</div>

Answer 1

如果我理解正确的话，您想为每个被调用的图像附加一个新文本。
为此，我建议您添加此函数并在每次调用新图像时调用它(以及 slide() 的末尾):

function ChangeText(imgNum){
      var allImagesAndText = {1: "This is image 1", 2: "This is image 2"};
      document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}