使用javascript动态添加图片。

我一直在开发一个流程图类型的程序，每次提出新问题时（这个问题由下面的“state”变量表示），它都会更改html的各个部分，例如标题、描述和图像

目前，我的图像HTML为：

<a id="imageLink" target="_blank" href=""><img class= 'right' id= 'imageBox' style ='max-height:50%;' src='' /></a>
<h3 id ='imageBoxText' ></h3>

在这种情况下，“问题一”将是“状态”

到目前为止，我可以使用以下方法异步加载单个映像：

document.getElementById("imageBox").src = "http://www.ktcagency.com/img/loader.gif"; // load spinner

var img = new Image(); // load image asynchronously
var newsrc = imageArray[state][0];
img.onload = function () { // onload handler
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

我还在图像上添加描述和链接：

document.getElementById("imageLink").setAttribute('href',imageArray[state][0])
document.getElementById('imageBoxText').innerHTML = imageArray[state][1];

好的，现在我需要做的是编写一个函数，可以对多个图像并排执行此操作，从修改后的imageArray读取，如下所示：

imageArray = {'questionOne': [['www.linktoimage1.com,'Legend for image1'],['www.linktoimage2.com,'Legend for image2']]}    

该代码应该能够处理多达三个图像，但我当然不介意它是否还能处理更多图像

我尝试使用一个表来表示图像，并使用for循环和前面的代码。图像永远不会加载，永远卡在旋转器上，图像都会聚集在屏幕的一侧

---

非常感谢您的帮助

嗯，我想我明白你想做什么了

听起来你好像在尝试制作某种幻灯片

这是一个我应该如何做的例子

这是jsfiddle，您可以看到发生了什么

---

所以你想在一个表中动态地创建

结构还是什么？是的，这个表是想把它们并排放在一起，但是只要图像没有粘在一起，它就不一定是一个表。

imageArray = {'questionOne': [['www.linktoimage1.com,'Legend for image1'],['www.linktoimage2.com,'Legend for image2']]}    

(function () {

var imageArray = {
    link: [['http://i.imgur.com/7OfqRbF.jpg', 'http://i.imgur.com/AHbc6zO.jpg','http://i.imgur.com/gW144OQ.jpg'],['http://i.imgur.com/v0V8hrB.jpg', 'http://i.imgur.com/9l40vIT.png','http://i.imgur.com/ZXYUttz.png']],
    label: [['Legend for image1','Legend for image2', 'Legend for image3'],['Legend for image4','Legend for image5', 'Legend for image6']]
},
    doc = document,
    question = 0,
    img = doc.getElementsByClassName('images'),
    links = doc.getElementsByClassName('links'),
    label = doc.getElementsByClassName('label'),
    button = doc.getElementById('button');


function add (state) {
        var arr = imageArray.link[state],
            arr2 = imageArray.label[state];
        arr.forEach(function(value,index,array) {
            img[index]['src'] = value;
            links[index]['href'] = value;
        });
        arr2.forEach(function(value,index,array) {
            label[index]['innerHTML'] = value;
        });
    question++;
}

window.addEventListener('load', add(question), false);
button.addEventListener('click', function () {
    add(question);
}, false)
}());