使用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循環比較之前。如果你知道起始索引只是增加一個計數器。不需要所有這些檢查。 – 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 
}

的一部分或簡單地在前面加上images/img/到img.src

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來更改網頁上的圖像

回答

相關問題