如何更改幻灯片放映的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>