每张图片上都有特定文字的幻灯片

Question

所以我用HTML / CSS / JS制作了这个小幻灯片，我想为6个图像中的每一个添加Text，但我无法弄清楚如何这样做，因为我只能更改我的第一张图像的文本。任何帮助表示赞赏。非常感谢提前。

＆＃13;

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解正确，您想要为每个被调用的图像添加新文本。
为了做到这一点，我建议你添加这个函数，并在每次调用一个新图像时调用它（以及slide()的结尾）：

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