简化图像的Javascript数组

-1

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

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); 
}

来源

2017-04-02 N.Ali

下面是一个简单的版本，做同样的事情......

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。

这是假设你开始播放幻灯片上的冬季，因为在你的榜样。

来源

2017-04-02 14:56:31 Archer

谢谢@Archer 它完美地工作。 –

不客气 - 高兴地帮助:) – Archer

要减少你可以使用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)

来源

2017-04-02 14:56:38 synthet1c

据我看到的，您只使用元素的src属性。关于保持路径只有？

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

和

document.times.src = season[start];

来源

2017-04-02 14:59:53 kuznya

简化图像的Javascript数组

回答

相关问题