Javascript圖像加載和顯示

我有一個網頁，顯示一個圖像和兩個箭頭，用Javascript。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>

來源

2011-02-25 Tori

的海報有你在正確的軌道上......我想你想使用的document.getElementById（「IMG」），因爲這會給你中間圖像這是你想要改變的人。 – Sam 2011-02-25 16:22:08

您正在使用getElementsByTagName，它返回DOM元素的集合，它與您的單個圖像不同。你應該做

img = getElementById('img');

來源

2011-02-25 16:23:48 Andrea

謝謝，解決了這個問題。 – Tori 2011-02-25 21:32:17

代碼img=document.getElementsByTagName('img');返回一個集合。您需要指定要修改的圖像來源，如img[index + 1].src = ...。我想你會想要使用index + 1，以便它不會從第一個圖像開始計算（左箭頭）。一個更好的解決方案可能是給你的所有圖像相同的類名並按類查找（document.getElementsByClassName('myClass');）。

來源

2011-02-25 16:18:07 mellamokb

Javascript圖像加載和顯示

回答

相關問題