如何更改幻燈片放映的javascript數組中的圖片大小？

Question

該數組用於javascript幻燈片，並且該數組包含許多用於圖片的不同URL源。 如何改變這些圖片的大小，使它們全部具有相同的高度和寬度？

var photos=new Array() 
var photoslink=new Array() 
var which=0 
//define images. You can have as many as you want: 
photos[0]="http://coolspotters.com/files/photos/376451/koala-bear-profile.jpg" 
photos[1]="http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg" 
photos[2]="http://www.alaska-in-pictures.com/data/media/1/red-fox-hunting_6159.jpg" 
//Specify whether images should be linked or not (1=linked) 
var linkornot=0 
//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1" 
photoslink[0]="http://coolspotters.com/files/photos/376451/koala-bear-profile.jpg" 
photoslink[1]="http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg" 
photoslink[2]="http://www.alaska-in-pictures.com/data/media/1/red-fox-hunting_6159.jpg" 

如何改變這些圖片的大小，使它們都具有相同的高度和寬度？

Answer 1

首先，創建一個這樣的數組：var myArray = [];更簡潔。

你的數組不是圖片，而是字符串，這是圖片的url。因此，從你當前的代碼你不能做你想問什麼。

這裏是把他們變成的img標籤，並將其附加到身體大小的圖像的一個例子：

var photos = [ 
    "http://coolspotters.com/files/photos/376451/koala-bear-profile.jpg", 
    "http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg", 
    "http://www.alaska-in-pictures.com/data/media/1/red-fox-hunting_6159.jpg" 
]; 

var photoslink = [ 
    "http://coolspotters.com/files/photos/376451/koala-bear-profile.jpg", 
    "http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg", 
    "http://www.alaska-in-pictures.com/data/media/1/red-fox-hunting_6159.jpg" 
]; 

// Create an array of img elements and append them to the body 
photos.forEach(function (photoUrl, index) { 
    var img = document.createElement('img'); 
    img.src = photoUrl; 
    img.height = '100'; 
    img.width = '225'; 
    document.body.appendChild(img); 
}); 

我希望這個操縱你在正確的方向。

Answer 2

你必須在HTML中做到這一點。您可以使用JavaScript或CSS設置高度和寬度。我已經創建了一些額外的代碼來幫助你。

這就是：

var photos = new Array(); 
 
var photoslink = new Array(); 
 
var which = 0; 
 

 
//Define images. You can have as many as you want: 
 

 
photos[0] = "http://coolspotters.com/files/photos/376451/koala-bear-profile.jpg"; 
 
photos[1] = "http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg"; 
 
photos[2] = "http://www.alaska-in-pictures.com/data/media/1/red-fox-hunting_6159.jpg"; 
 

 
//If you wish to have a image not linked, insert a empty string instead. 
 

 
photoslink[0] = "http://coolspotters.com/files/photos/376451/koala-bear-profile.jpg"; 
 
photoslink[1] = "http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg"; 
 
photoslink[2] = "http://www.alaska-in-pictures.com/data/media/1/red-fox-hunting_6159.jpg"; 
 

 
setInterval(function() { 
 
    document.getElementById("slideshow").src = photos[which]; 
 
    document.getElementById("slideshowLink").href = photoslink[which]; 
 
    if (which > photos.length - 2) { 
 
    which = 0; 
 
    } else { 
 
    which += 1; 
 
    } 
 
}, 2500);

<a id='slideshowLink' target='_blank'> 
 
    <img id='slideshow' alt='Loading Slideshow...' height='250px' width='400px' border='1'> 
 
</a>