2014-12-11 5 views
0

for 루프와 간격을 사용하여 3 장의 사진을 차례로 표시하는 함수를 만들었습니다. 이미지를 기다리는 간격과 함수를 중지하는 clearInterval을 사용했습니다. 처음에는 애니메이션이 완벽하게 실행되었지만 애니메이션을 다시 실행하는 데 문제가있어 항상 페이지를 새로 고쳐야합니다.
자바 스크립트자바 스크립트 간격 문제

var currentImageIndex = 1; 
var maxImageIndex = 0; 
var images = []; 
var setUp = function() { 
    images = document.images; 
    maxImageIndex = 3; 
    currentImageIndex = 0; 
    i = 0 
} 

function change() { 
    var i; 
    if (currentImageIndex > 2) { 
    images[currentImageIndex - 1].hidden = true; 
    clearInterval(myTimer); 
    setUp(); 
    } else { 
    currentImageIndex = currentImageIndex += 1 
    } 
    for (i = 0; i < maxImageIndex; i += 1) { 
    images[i].hidden = (i !== currentImageIndex); 
    } 
} 

window.onload = function() { 
    setUp() 
}; 

function goNow() { 
    images[currentImageIndex].hidden = false; 
    var myTimer = setInterval(change, 1000); 
    setTimeout; 
} 

HTML

<button onclick="goNow()">Button</button> 
<div id="imgs"> 
<img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/GoraBeluha.jpg" width = "100%" height="600" id="i1" hidden> 
<img src="../Downloads/loose-leaf-paper-clipart-paper-clip-art_1404142000.jpg" width = "100%" height="600" id="i3" hidden> 
<img src="../Downloads/img-thing.jpeg" width = "100%" height="600" id="i2" hidden> 
</div> 

나는 문제가 루프 위해 clearInterval 또는 내 설정 기능의와인지 단서가 없다. 어떤 도움이라도 대단히 감사하겠습니다.

+1

'goNow()'의 끝에서'setTimeout'이란 무엇입니까? – Barmar

+1

'var myTimer = ...'를'goNow()'에 정의하여이 변수를이 함수의 범위에 대해 로컬로 만듭니다. 왜 그것이'change()'에서 보이기를 기대합니까? –

+0

'.hidden' 속성에 의존하는 것은 좋은 생각이 아닙니다. 그것은 비교적 새로운 것이고 그것을 구현 한 첫 번째 IE 버전은 IE11입니다. – Barmar

답변

0

코드를 디버깅했습니다. 기능 변경()을 입력 할 수 없습니다. 다음과 같이 시도해보세요.

var myVar=setInterval(function(){myTimer()},1000); 
    function myTimer() { 

     change(); 
    } 

테스트 해 볼 수 있습니다!