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元素

＆＃13;

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)

＆＃13;

Answer 3

据我所知，你只使用元素的src属性。什么是保持路径？

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

和

document.times.src = season[start];

简化Javascript图像数组

3 个答案: