javascript - 如何在包含图片的 Javascript 数组中插入 HTML 标签？

Question

我一直在尝试用图片和文本制作一个简单的数组幻灯片，但我对 JavaScript 非常糟糕。目前我有这段代码，它是带有图片的幻灯片(没有文字):

var image = document.getElementById("mainImage");
var imageArray = ["Items/Images/SkinnyCannibals.png", "Items/Images/PaintedCannibals.png", "Items/Images/Firemen.png", "Items/Images/DynamiteCannibal.png", "Items/Images/Armsy.png", "Items/Images/BabyMutant.png", "Items/Images/Virginia.png", "Items/Images/Cowman.png", "Items/Images/BlueArmsy.png", "Items/Images/BlueVirginia.png", "Items/Images/Worm.png", "Items/Images/EndBoss.png"];
var imageIndex = 1;

function changeImageNext() {

  image.setAttribute("src", imageArray[imageIndex]);
  imageIndex++;

  if (imageIndex > imageArray.length) {
    imageIndex = 0;
  }

}

function changeImagePrev() {

  image.setAttribute("src", imageArray[imageIndex]);
  imageIndex--;

  if (imageIndex > imageArray.length) {
    imageIndex = 0;
  }

}

<input type="button" value="Next" id="nextButton" onclick="changeImageNext();">
<input type="button" value="Prev" id="prevButton" onclick="changeImagePrev();">
<img src="Items/Images/SkinnyCannibals.png" id="mainImage">

现在，我想要的是这组图像以及对这些图片/怪物中的每一个的描述(所以基本上，我认为，另一个数组链接到相同的按钮)。因此，当您按下 Next/Prev 按钮时，您会为这些图片中的每一张获得一些文本。

关于如何解决这个问题的任何想法？或者也许其他方法可以用纯 Javascript 做到这一点？

Answer 1

您可以为文本添加一个单独的 div 并使用一个二维数组:一个数组 (a)，其中包含由两个元素组成的数组 (b)，即对图像和文本的引用。
然后，您可以跳过数组 a 并通过相应地访问数组 b 的元素来填充页面上的链接和文本:

var text = document.getElementById("mainText");
var image = document.getElementById("mainImage");
var imageArray = [["Items/Images/SkinnyCannibals.png", "A Cannibal"], ["Items/Images/PaintedCannibals.png", "A painted cannibal"],["Items/Images/Firemen.png", "A Fireman"],["Items/Images/DynamiteCannibal.png", "A dynamite"],["Items/Images/Armsy.png", "A comment"],["Items/Images/BabyMutant.png", "A mutant"], ["Items/Images/Virginia.png", "Virginia"], ["Items/Images/Cowman.png", "Cowman"], ["Items/Images/BlueArmsy.png", "Blue"],["Items/Images/BlueVirginia.png", "Blue virginia"], ["Items/Images/Worm.png", "Worms!"], ["Items/Images/EndBoss.png", "Endboss"]];
var imageIndex = 1;
function changeImageNext(){
    image.setAttribute("src", imageArray[imageIndex][0]);
    text.innerHTML = imageArray[imageIndex][1];
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

function changeImagePrev(){
    image.setAttribute("src", imageArray[imageIndex][0]);
    text.innerHTML = imageArray[imageIndex][1];
    imageIndex--;
    if (imageIndex < 0) {
        imageIndex = imageArray.length-1;
    }
}

<input type="button" value="Next" id="nextButton" onclick="changeImageNext();">
<input type="button" value="Prev" id="prevButton" onclick="changeImagePrev();">
<img src="Items/Images/SkinnyCannibals.png" id="mainImage"><br />
<div id="mainText">A Cannibal</div>