2017-02-19 23 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

定義圖像的正確路徑。 –