如何使用javascript将图像数组显示为列表，并使其可单击以显示一些文本？

我需要显示一个数组中的图像列表，并使其可单击以在单击时显示一些文本。寻找一些只使用javascript的简单解决方案

var images = ["img1", "img2", "img3"];

var allPics = images.length;
var i = 0;

for(;i<allPics; i++){
myImg.src = images[i];
}

var images=[“img1”、“img2”、“img3”]；
var allPics=images.length；
var i=0；
为了

现在只显示一个图像

现在只显示一个图像

因为您在循环中多次使用一个
。在上一次迭代之后，它的
src
不再更新。这就是您看到最后一个图像的原因

更改您的html，以便将
作为容器/占位符，而不是
：

在循环的每次迭代中，您都不会创建一个新的
img
标记，而只是使用迭代中的当前图像更新
img
标记
myImg
的源。这就是为什么最后一个图像是显示的图像。您尝试了什么来解决这个问题？您还没有问任何问题。比ks@Muhammad Alvin。如果我有一个视频数组，就像我有一个图像数组一样，我需要在单击图像时播放视频。我如何将视频数组与图像数组链接？你可以使用html和js的组合。首先，显示视频并给它唯一的id（例如：），然后在单击时显示图像并添加js以播放视频（例如：）。这个想法和以前一样，你只需要调整输出。对于唯一id，你可以使用数组索引。非常感谢。我真的非常感谢你的帮助。请再给我一点帮助。实际上我不希望所有视频都显示在页面上。我有一个学校作业，其中有视频列表和图像列表。在标题中，我有one视频和页脚中的图像列表。当我单击图像时，它应该隐藏第一个视频并播放与图像链接的另一个视频。例如：var img=['img1'，'img2'，'img3']；和…var video=['vid1'，'vid2'，vid3]；现在，如果我单击img1，那么vid1应该播放。非常感谢您的帮助。我真的很感谢您的帮助，但我想我无法以正确的方式向您解释，我有两个阵列，一个是图像，一个是视频。如果我单击img[1]，那么它应该播放视频[1]。
<!-- <img id="myImg"/> -->

<div id="myImg"></div>

for(;i<allPics; i++){
    // myImg.src = images[i];

    // TODO: adjust this to whatever you want
    // in this example, use `<a>` that link to another page
    // you can use javascript to show modal/alert too
    var a = document.createElement('a');
    a.href = 'example.html'; // TODO: adjust this

    var img = document.createElement('img');
    img.src = images[i];
    a.appendChild(img);

    document.getElementById('myImg').appendChild(a);
}

#myImg img {
    ...
}