画像のJavascript配列の簡略化

Question

このJavaScript配列を簡略化する最良の方法は何ですか？ スライドに4枚の写真が表示されるページを作成するように求められましたが、これは onMouseOverイベントとonMouseOutイベントを使用します。私はここに コードの部分を添付していません。これは私が始めたところですが、あまりにも長く見えます。 誰かが私のためにこれを簡略化できますか？前もって感謝します。あなただけの必要があるので、あなただけのsrc属性を変更している -

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

まずあなたは画像の配列を必要としないのです文字列の配列seasonCountと% season.lengthが増えるように、changeSeason()関数を簡略化し、配列の長さに達すると0にリセットされることを意味します。

この例では、冬にスライドショーを開始することを前提としています。ソースで要素をHTMLImageするためにそれらを変換し、その後、あなたがイメージソースのリストを反復処理するためにArray.prototype.mapを使用することができ、コードを減らすために

Answer 2

は、私の知る限り見るように

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];