JavaScript在数组中加载图像并在图像源中显示

我创建了一组图像

function initialize(){
//add our 10 images to our array
imgArray[imageNum++] = new imageItem(imageDir + "img1.jpg");
imgArray[imageNum++] = new imageItem(imageDir + "img2.jpg");
imgArray[imageNum++] = new imageItem(imageDir + "img3.jpg");

}
var totalImgs = imgArray.length;

然后，我创建一个函数，该函数与html文件中的链接：

<button id="startButton" onclick="startImage()">Start</button>

function startImage(){

    document.getElementById("pic").setAttribute("src", imgArray[0].src);
}   

开始
函数startImage（）{
document.getElementById（“pic”）.setAttribute（“src”，imgArray[0].src）；
}   

我的图像标签：

---

这无法更新我的img对象，我使用firebug查看DOM，并且我的数组被正确填充，但是img src没有被设置？

像这样修改javascript函数并查看

function startImage(){

    document.getElementById("pic").src =  imgArray[0].src;
} 

---

像这样修改javascript函数，请参见

function startImage(){

    document.getElementById("pic").src =  imgArray[0].src;
} 

---

你的例子不完整。您需要显示

imageItem

构造函数的功能（构造函数中的第一个字符通常使用大写字母），因此：

我应该在这里工作。您似乎还希望将

imgaray

作为一个全局变量，因此将其声明为一个全局变量：

var imgArray;

function initialize(){
    //add our 10 images to our array 
    imgArray[imageNum++] = new imageItem(imageDir + "armory.jpg");

分配数组文字要简单一些：

    imgArray = [ new ImageItem(imageDir + "armory.jpg"),
                 new ImageItem(imageDir + "eddy.jpg"),
                 ...
                 new ImageItem(imageDir + "...")
    ];
}

var totalImgs = imgArray.length;

虽然我不明白为什么不直接分配数组文本，而不用包装函数。

startImage

功能可以更整洁一些：

function startImage(){
    document.getElementById("pic").src = imgArray[0].src;
}

---

跨浏览器直接访问元素属性更可靠，而且比使用

setAttribute

（在某些浏览器中有一些怪癖）更容易键入。

您的示例不完整。您需要显示

imageItem

构造函数的功能（构造函数中的第一个字符通常使用大写字母），因此：

我应该在这里工作。您似乎还希望将

imgaray

作为一个全局变量，因此将其声明为一个全局变量：

var imgArray;

function initialize(){
    //add our 10 images to our array 
    imgArray[imageNum++] = new imageItem(imageDir + "armory.jpg");

分配数组文字要简单一些：

    imgArray = [ new ImageItem(imageDir + "armory.jpg"),
                 new ImageItem(imageDir + "eddy.jpg"),
                 ...
                 new ImageItem(imageDir + "...")
    ];
}

var totalImgs = imgArray.length;

虽然我不明白为什么不直接分配数组文本，而不用包装函数。

startImage

功能可以更整洁一些：

function startImage(){
    document.getElementById("pic").src = imgArray[0].src;
}

---

跨浏览器直接访问元素属性更可靠，而且比使用

setAttribute

（在某些浏览器中有一些怪癖）更容易键入。

加载多个图像听起来像是一种您可能希望在不同项目中使用的功能。我建议创建一个可以处理图像数组并将图像对象附加到DIV的函数：

var images = [
    'path/to/image1.png',
    'path/to/image2.png',
    'path/to/image3.png',
    'path/to/image4.png',
    'path/to/image5.png'
];

function loadImages(imgArr, targetId){
    for(var i=0; i< imgArr.length; i++) {
        console.log(imgArr[i]);
        var img = new Image();
            img.src = imgArr[i];
        document.getElementById('output').appendChild(img);
    }
}

loadImages(images);

var图像=[
'path/to/image1.png'，
'path/to/image2.png'，
'path/to/image3.png'，
'path/to/image4.png'，
'path/to/image5.png'
];
函数loadImages（imgArr、targetId）{
对于（变量i=0；i

您还可以从yout按钮调用loadImage（）函数：

<button onclick="loadImages(images)">Start</button>

开始

加载多个图像听起来像是一项功能，您可能希望在不同的项目中使用它。我建议创建一个可以处理图像数组并将图像对象附加到DIV的函数：

var images = [
    'path/to/image1.png',
    'path/to/image2.png',
    'path/to/image3.png',
    'path/to/image4.png',
    'path/to/image5.png'
];

function loadImages(imgArr, targetId){
    for(var i=0; i< imgArr.length; i++) {
        console.log(imgArr[i]);
        var img = new Image();
            img.src = imgArr[i];
        document.getElementById('output').appendChild(img);
    }
}

loadImages(images);

var图像=[
'path/to/image1.png'，
'path/to/image2.png'，
'path/to/image3.png'，
'path/to/image4.png'，
'path/to/image5.png'
];
函数loadImages（imgArr、targetId）{
对于（变量i=0；i

您还可以从yout按钮调用loadImage（）函数：

<button onclick="loadImages(images)">Start</button>

开始

是否定义了imageNum？如果未定义，则imageNum++将返回NaN。。此外，是否定义了imgaray？如果不是，那么imgaray[n]将抛出异常。您可能应该使用imgArray.push（new-imageItem（imageDir+“armory.jpg”）…在startImage（）中调用imgArray[0]——但是从函数内部无法识别imgArray！什么是

imageItem

？您确定它返回一个

HTMLImageElement

？您确定您的

imageDir

正确吗？您可能需要提供更多详细信息，以便我们提供帮助（即，您的更多代码）。否则，我必须问一些问题，比如您是否调用了initialize（）？是否定义了imageNum？如果未定义，则imageNum++将返回NaN。。此外，是否定义了imgaray？如果不是，那么imgaray[n]将抛出异常。您可能应该使用imgArray.push（new-imageItem（imageDir+“armory.jpg”）…在startImage（）中调用imgArray[0]——但是从函数内部无法识别imgArray！什么是

imageItem

？您确定它返回一个

HTMLImageElement

？您确定您的

imageDir

正确吗？您可能需要提供更多详细信息，以便我们提供帮助（即，您的更多代码）。否则，我必须问一些问题，比如您是否调用了initialize（）？ImageItem函数以及声明为全局数组的数组。感谢您展示了如何在没有包装函数的情况下分配数组？ImageItem函数和声明为全局数组的数组。谢谢你告诉我如何在没有包装函数的情况下分配数组？