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 = [];更简洁。

你的数组不是图片，而是字符串，它们是图片的网址。因此，从您当前的代码中，您无法满足您的要求。

以下是通过将图像转换为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>

如何更改javascript数组中图片的大小以进行幻灯片放映？

2 个答案: