简化 Javascript 个图像数组

Question

简化此 javascript 数组的最佳方法是什么？我被要求创建一个幻灯片显示 4 张图片的页面，它将使用 onMouseOver 和 onMouseOut 事件。我没有附上那部分代码在这里。这是我开始的地方，但看起来太长了。能有人请为我简化这个吗？提前致谢。

 var season = Array();
 var start = 0;
 var timeDelay=3000;

season[0]=new Image();
season[0].src="winter.jpg";
season[1]=new Image();
season[1].src="spring.jpg";
season[2]=new Image();
season[2].src="summer.jpg";
season[3]=new Image();
season[3].src="fall.jpg";

function changeSeason(){
    var size= season.length - 1;
    if( start < size ) {
         start++;
    }
    else {
         start = 0;
    }
    document.times.src= season[start].src;
    timeout=setTimeout('changeSeason()', timeDelay);
}

Answer 1

这是一个更简单的版本，其功能完全相同...

var season = ["winter.jpg", "spring.jpg", "summer.jpg", "fall.jpg"];
var timeDelay=3000;
var seasonCount = 0;

function changeSeason(){
    document.times.src = season[++seasonCount % season.length];
    setTimeout(changeSeason, timeDelay);
}

首先，您不需要图像数组 - 您只是更改 src 属性，因此您只需要一个字符串数组。我还简化了 changeSeason() 函数，使其递增 seasonCount 和 % season.length 意味着它将在达到数组长度时重置为 0。

这假设您在冬天开始放映幻灯片，如您的示例所示。

Answer 2

要减少代码，您可以使用 Array.prototype.map 遍历图像源列表，然后将它们转换为带有源集的 HTMLImage 元素

var sources = ['winter.jpg', 'spring.jpg', 'summer.jpg', 'fall.jpg']

var seasons = sources.map(function(src) {
  var img = new Image()
  img.src = src
  return img
})

console.log(seasons)

Answer 3

据我所知，您只使用了元素的 src 属性。仅保留路径有何意义？

var season = ['winter.jpg', 'spring.jpg', 'summer.jpg', 'fall.jpg'];

和

document.times.src = season[start];

简化 Javascript 个图像数组

Simplifying Javascript array of images

javascript

arrays

onmouseover