Question

我有一个网页，显示图片和两个箭头，使用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>

Answer 1

您正在使用getElementsByTagName返回DOM元素的集合，这与您的单个图像不同。你应该做

img = getElementById('img');

Answer 2

代码img=document.getElementsByTagName('img');返回一个集合。您需要指定要修改的图像源，例如img[index + 1].src = ...。我想你会想要使用index + 1，这样就不会用第一张图片（左箭头）开始计算。更好的解决方案可能是为所有图像提供相同的类名，并按类（document.getElementsByClassName('myClass');）查找。

Javascript图像加载和显示

2 个答案: