Загрузка и отображение изображения Javascript - PullRequest
Новая
       31

Загрузка и отображение изображения Javascript

0 голосов
/ 25 февраля 2011

У меня есть веб-страница с изображением и двумя стрелками с Javascript.

При нажатии на стрелку вправо увеличивается индекс, и должно быть загружено новое изображение.При нажатии на стрелку влево индекс уменьшается, и должно быть загружено новое изображение.

Я добавил несколько предупреждений в код, который показывает, что индекс увеличивается, но новое изображение все еще не отображается.Буду признателен за указание на то, что не так с кодом.

Всегда отображается только исходное изображение, и оно не обновляется.Ссылка меняет цвет и отображаются предупреждения. 

   <html>
    <head>
     <title> Gallery</title>
    </head>
      <script type="text/javascript">
        var rightTarget;
        var leftTarget;
        var index = 516;       

        function rightLinkClicked(e) {
            rightTarget = e.target;
            rightTarget.style.color = "green";
            leftTarget.style.color = "black";
            index = index +1;
            alert ("right1")
        var img;
            img=document.getElementsByTagName('img');
            img.src="pics/IMG_0" + index + ".JPG";
            alert ("right2 - index = IMG_0" + index + ".JPG")
            }

function leftLinkClicked(e) {
leftTarget = e.target;
leftTarget.style.color = "red";
rightTarget.style.color = "black";
    if (index >516) {
index = index -1;
}
var img;
    img=document.getElementsByTagName('img');
    img.src="pics/IMG_0" + index + ".JPG"
    alert ("left - index = "+ index)
 }

function addListeners() {
var rightLink = document.getElementById("rightlinkid");
    rightLink.addEventListener('click', rightLinkClicked, false);

    var leftLink = document.getElementById("leftlinkid");
    leftLink.addEventListener('click', leftLinkClicked, false);
}
window.addEventListener('load', addListeners, false);
</script>
</head>
<body>
   <a id="leftlinkid">Left Link
      <img src="icons/left.gif"; alt="left arrow" title="">
   </a>

 <div id="myimg">       
  <img id="img" src="pics/IMG_0516.JPG"; alt="start arrow" title="" width="640" height="480">
 </div>

    <a id="rightlinkid">Right Link
   <img src="icons/right.gif"; alt="right arrow" title="">
   </a>
  </body>
  </html>

Ответы [ 2 ]

1 голос
/ 25 февраля 2011

Вы используете getElementsByTagName, который возвращает коллекцию элементов DOM, которая отличается от вашего отдельного изображения. Вы должны сделать 

img = getElementById('img');
0 голосов
/ 25 февраля 2011

Код img=document.getElementsByTagName('img'); возвращает коллекцию. Вам необходимо указать источник изображений, который вы хотите изменить, например img[index + 1].src = .... Я думаю, вы захотите использовать index + 1, чтобы он не начинал считать с первого изображения (стрелка влево). Лучшим решением может быть дать всем вашим изображениям одинаковое имя класса и найти их по классу (document.getElementsByClassName('myClass');).

...