簡化圖像的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數組

回答

相關問題