2017-02-19 49 views
-1

我是JavaScript新手,我制作了这段代码。此代码的目的是使用JavaScript和HTML在网站中显示图像的ARRAY。他们都需要一次显示。这是迄今为止的代码,但它不起作用。在JavaScript中输出图像数组

<html> 
<head> 
<script> 
     var ArrayOfImages = []; 

     var Image1 = new Image1() 
     image1.src = "image1.jpg"; 

     var Image2 = new Image2() 
     Image2.src = "image2.jpg"; 

     var Image2 = new Image3() 
     Image3.src = "image3.jpg"; 

     ArrayOfImages.push(Image1); 
     ArrayOfImages.push(Image2); 
     ArrayOfImages.push(Image3); 
     ArrayOfImages.toString(); 
     document.write(ArrayOfImages); 
</script> 
</head> 
<body> 
</body> 
</html> 

当我运行这段代码时,我所得到的只是一个空的网页。

对于任何人想知道的问题,图像与html文件在同一个文件中。我对JavaScript和HTML也比较陌生,所以请务必明确如何解决它。

+1

哪里'Image1,2,3..'类(对象)? –

+1

它们都应该是'new Image()',你需要将它们附加到body元素。 'Document.Write()'用于将字符串写入主体。看看[这个问题](http://stackoverflow.com/questions/2735881/adding-images-to-the-html-with-javascript)为你所需要的帮助。 – Archer

+0

我不知道你是什么意思。我从网站上获得了部分代码,帮助人们使用javascript。我用那些Images1,2,3 cuz他们是变量的名字。对不起,如果我对你没什么帮助。 –

回答

2

你必须使用array.forEach然后append在body.Like这个

var ArrayOfImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; //your assumed array 
 
ArrayOfImages.forEach(function(image) { // for each link l in ArrayOfImages 
 
    var img = document.createElement('img'); // create an img element 
 
    img.src = image;       // set its src to the link l 
 
    document.body.appendChild(img);   // append it to the body 
 
});

见小提琴每个数组项:Fiddle

UPDATE

你可以人因此根据您的要求设置heightwidth。如下所示。

var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg']; //your assumed array 
 
ArrayOfImages.forEach(function(image) { 
 
    var img = document.createElement('img'); 
 
    img.src = image; 
 
    img.height = "45"; 
 
    img.width = "50"; 
 
    document.body.appendChild(img); 
 
});

+0

我复制了你所做的,我仍然得到一个空白页面。这是我现在的代码。 –

+0

\t \t \t \t \t \t \t \t \t –

+0

定义图像的正确路径。 –