使用Javascript更改网页上的图像

Using Javascript to change an image on a webpage

本文关键字：图像 网页 Javascript 使用      更新时间：2023-09-26

我已经在这段代码上工作了一段时间，由于某种原因，我不能告诉它不改变当我按下更改图像按钮时显示的图像。有人能帮忙吗?

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>

内部外部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
}
相关文章：