Simplifying Javascript Array von Bildern

Question

Was ist der beste Weg, um diese Javascript-Array zu vereinfachen? Ich werde gebeten, eine Seite zu erstellen, die Diashow 4 Bilder zeigt, die die onMouseOver und onMouseOut Ereignisse verwendet. Ich habe diesen Teil des Codes hier nicht beigefügt. Hier habe ich angefangen, aber es sieht zu lang aus. Kann jemand bitte das für mich vereinfachen? Danke im Voraus.

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

Hier ist eine einfachere Version, die genau die gleiche Sache tut ...

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

Erstens brauchen Sie nicht eine Reihe von Bildern - Sie nur das Attribut src ändern, so müssen Sie nur ein Array von Strings. Ich vereinfachte auch die changeSeason() Funktion, so dass es seasonCount und % season.length inkrementiert bedeutet, dass es auf 0 zurückgesetzt wird, wenn es die Array-Länge erreicht.

Dies setzt voraus, dass Sie die Diashow im Winter starten, wie in Ihrem Beispiel.

Answer 2

den Code reduzieren Sie Array.prototype.map verwenden könnte über eine Liste von Bildquellen zu durchlaufen, dann wandeln sie Elemente mit der Quelle

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

gesetzt Was zu Htmlimage wie ich sehe, Sie verwenden nur die Eigenschaft src des Elements. Was ist nur Pfade zu halten?

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

und

document.times.src = season[start];