왜이 간단한 슬라이드 쇼가 자바 스크립트에서 작동하지 않습니까?

Question

아래에 간단한 슬라이드 쇼 스크립트가 있지만 마지막 이미지 만 표시하고 있습니다. 그 사이에 2500ms의 간격으로 각 이미지가 표시되지 않는 이유는 무엇입니까?

window.onload = myFunction; 

var interval = 2500; 
var i = 0; 
var images = ["1.png","2.png","3.png","4.png"]; 
var description = ["image1", "image2" , "image3" , "image4"]; 

function myFunction() { 

    function setAttribute (number) { 
     document.getElementById("image").src = images[number]; 
     document.getElementById("me").innerHTML = description[number]; 
    } 

    function changeAttribute() { 
     while (i < 4) { 
      setAttribute(i); 
      i++; 
     } 
    } 

    setInterval(changeAttribute, interval); 
} 

Answer 1

당신은 한 번에 각 옵션을 통해 실행하고 의미 while 루프로 반복하고

; 초과 실행시 i = 0을 재설정하면 무한 루프가 발생했을 것입니다. 처음으로 간격 호출을 축복하는 모든 이미지에 대한

window.onload = myFunction; 

var interval = 2500; 
var i = 0; 
var images = ["1.png", "2.png", "3.png", "4.png"]; 
var description = ["image1", "image2", "image3", "image4"]; 

function myFunction() { 
    setInterval(changeAttribute, interval); 

    function setAttribute(number) { 
     document.getElementById("image").src = images[number]; 
     document.getElementById("me").innerHTML = description[number]; 
    } 

    function changeAttribute() { 
     setAttribute(i); 

     if (i < 3) { 
      i++; 
     } else { 
      i = 0; 
     } 
    } 

} 

http://jsfiddle.net/6LQpu/

Answer 2

귀하의 changeAttribute주기를 마지막 이미지에 중지 :

사용 setInterval()는 대신 할 수 있습니다. 변수 i의 값이 4이기 때문에 이후에는 아무 일도 일어나지 않습니다. 매 간격마다 현재 값으로 속성을 설정하고 값을 다음 색인으로 변경하기 만하면됩니다. 모듈러스 연산자를 사용하여 0..images-1의 값을 순환시킬 수 있습니다.

function changeAttribute() { 
    setAttribute(i); 
    i = (i+1) % images.length; 
}