Javascriptを使用してウェブページの画像を変更する

私はこのコードをしばらく使っていましたが、画像の変更ボタンを押したときに表示される画像を変更していないとは言えません。誰も助けることができますか？Javascriptを使用してウェブページの画像を変更する

これはJavascriptが

var imgArray = new Array(); 
 

 
imgArray[0] = new Image(); 
 
imgArray[0].src = "images/img/red.gif"; 
 

 
imgArray[1] = new Image(); 
 
imgArray[1].src = "images/img/red_and_yellow.gif"; 
 

 
imgArray[2] = new Image(); 
 
imgArray[2].src = "images/img/green.gif"; 
 

 
imgArray[3] = new Image(); 
 
imgArray[3].src = "images/img/yellow.gif"; 
 

 
imgArray[4] = new Image(); 
 
imgArray[4].src = "images/img/red.gif"; 
 

 
/*------------------------------------*/ 
 

 
function nextImage(element) { 
 
    var img = document.getElementById(element); 
 

 
    for (var i = 0; i < imgArray.length; i++) { 
 
    if (imgArray[i].src == img.src) // << check this 
 
    { 
 
     if (i === imgArray.length) { 
 
     document.getElementById(element).src = imgArray[0].src; 
 
     break; 
 
     } 
 
     document.getElementById(element).src = imgArray[i + 1].src; 
 
     break; 
 
    } 
 
    } 
 
}

をファイルであり、これはHTMLです。

<!doctype html> 
 
<html> 
 

 
<body> 
 
    <h1> Press the button to change the lights. </h1> 
 
    <div id="lights"> 
 
    <img src="red.gif" alt="" id="mainImg"> 
 

 
    </div> 
 

 
    <div id="imglist"> 
 
    <a href="javascript:nextImage('mainImg')"> 
 
     <img src="next_img.png" alt=""> 
 
    </a> 
 
</body> 
 

 
</html>

助けてください。

出典

2016-10-18 Ryan W

は、forループを使用しても意味がありません前にimg.srcするimages/img/を付加の一部である場合。あなたが開始インデックスを知っているあなたは、カウンタを増分するだけです。これらすべてのチェックの必要はありません。 – epascarello

外for-loopチェックインサイドimg.srcはimgArray[i]

if (imgArray[i].src.indexOf(img.src)!= -1) // notice the change here 
{ 
    //rest of the code remains same 
}

または単に比較

if (imgArray[i].src == ("images/img/" + img.src)) // notice the change here 
{ 
    //rest of the code remains same 
}

出典

2016-10-18 11:53:36 gurvinder372

Javascriptを使用してウェブページの画像を変更する

答えて

関連する問題