Fatal编程技术网

Javascript图像加载和显示

javascript image

Javascript图像加载和显示,javascript,image,dom-events,Javascript,Image,Dom Events,我有一个网页，显示一个图像和两个箭头，带有Javascript 单击右箭头时，索引将递增，并应加载新图像。 单击左箭头时，索引递减，应加载新图像 我在代码中添加了一些警报，显示索引已增加，但新图像仍不显示。我希望你能指出代码的错误 只有初始图像始终显示，并且不会更新。链接将更改颜色并显示警报 <html> <head> <title> Gallery</title> </head> <s

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


画廊
var rightTarget；
var-leftTarget；
var指数=516；
函数rightLinkClicked（e）{
rightTarget=e.target；
rightTarget.style.color=“绿色”；
leftTarget.style.color=“黑色”；
指数=指数+1；
警报（“右1”）
var-img；
img=document.getElementsByTagName（'img'）；
img.src=“pics/img_0”+索引+”.JPG”；
警报（“right2-index=IMG_0”+index+”.JPG）
}
函数leftLinkClicked（e）{
leftTarget=e.target；
leftTarget.style.color=“红色”；
rightTarget.style.color=“黑色”；
如果（索引>516）{
指数=指数-1；
}
var-img；
img=document.getElementsByTagName（'img'）；
img.src=“pics/img_0”+索引+”.JPG”
警报（“左-索引=”+索引）
}
函数addListeners（）{
var rightLink=document.getElementById（“rightlinkid”）；
rightLink.addEventListener（'click'，rightLinkClicked，false）；
var leftLink=document.getElementById（“leftlinkid”）；
leftLink.addEventListener（'click'，leftLinkClicked，false）；
}
addEventListener（'load'，addListeners，false）；
左连杆
右链接

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


img = getElementById('img');



海报让你走上了正确的轨道。。。我认为您需要使用document.getElementById（'img'），因为这将为您提供中间图像，即您要更改的图像。