자바 스크립트 이미지로드 및 표시

이미지가 표시된 웹 페이지와 두 개의 화살표가 있으며 자바 스크립트가 있습니다.자바 스크립트 이미지로드 및 표시

오른쪽 화살표를 클릭하면 색인이 증가하고 새 이미지를로드해야합니다. 왼쪽 화살표를 클릭하면 색인이 감소하고 새 이미지가로드됩니다.

코드에 경고가 추가되어 인덱스가 증가했지만 새 이미지는 계속 표시되지 않습니다. 코드의 문제점에 대한 정보를 알려 주시면 감사하겠습니다.

초기 이미지 만 항상 표시되며 업데이트되지 않습니다. 링크 변경 색상과 경고가 표시됩니다.

<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

당신은 하나의 이미지와 동일하지 않습니다 DOM 요소의 컬렉션을 반환 getElementsByTagName을 사용하는

. 당신이 포스터는 바른 길에 당신이

img = getElementById('img');

출처

2011-02-25 16:23:48 Andrea

감사합니다. 문제가 해결되었습니다. – Tori

코드 img=document.getElementsByTagName('img');은 컬렉션을 반환합니다. img[index + 1].src = ...과 같이 수정할 이미지 소스를 지정해야합니다. 나는 index + 1을 사용하여 첫 번째 이미지 (왼쪽 화살표)로 계산을 시작하지 않을 것이라고 생각합니다. 더 나은 해결책은 모든 이미지에 동일한 클래스 이름을 지정하고 클래스 (document.getElementsByClassName('myClass');)로 찾는 것입니다.

출처

2011-02-25 16:18:07 mellamokb

자바 스크립트 이미지로드 및 표시

답변

관련 문제