Блог

Главная - Вопросы по программированию - Использование Javascript для изменения изображения на веб-странице

Использование Javascript для изменения изображения на веб-странице

#javascript #arrays

#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>

Любая помощь будет оценена.

Комментарии:

1. нет смысла использовать цикл for . Если вы знаете начальный индекс, просто увеличьте счетчик. Нет необходимости во всех этих проверках.

Ответ №1:

Внутри внешней 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
}