"시작"버튼을 클릭 할 때까지 자동 실행 기능을 중지하십시오.

Question

이전에 내 이미지 슬라이드 쇼의 일시 중지 단추를 만드는 데 도움이되었지만 특정 시점까지 작동하는 것 같습니다.

슬라이드 쇼 자동 실행은 "시작"버튼을 클릭했을 때 실행됩니다. 일시 중지 버튼을 작동시키기 위해 코드를 사용하기 전까지는 정상적으로 작동했습니다. 이제 autoRun 함수는 페이지가로드 될 때 시작됩니다. 이 문제를 막을 수있는 방법이 있습니까? 시작 단추를 클릭하면 시작됩니다. 건배

html로

<button onClick="autoRun()">Start</button> 
    <button onClick="changeImage(-1); return false;">Previous Image</button> 
    <button onClick="pause();">pause</button> 
    <button onClick="changeImage(1); return false;">Next Image</button> 

자바 스크립트

var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"]; 
var interval = setInterval("changeImage(1)", 2000); 
var imageNumber = 0; 
var imageLength = images.length - 1; 

function changeImage(x) { 
imageNumber += x; 
// if array has reached end, starts over 
if (imageNumber > imageLength) { 
    imageNumber = 0; 
} 
if (imageNumber < 0) { 
    imageNumber = imageLength; 
} 

document.getElementById("slideshow").src = images[imageNumber]; 

return false; 
} 

function autoRun() { 
setInterval("changeImage(1)", 2000); 

} 

function pause(){ 
clearInterval(interval); 
} 

Answer 1

다음 코드 줄을 제거하고 그 VAR 간격을 도움이 있으면 알려 주시기 바랍니다 = setInterval을 ("changeImage (1)", 2000); 코드에 아무것도 당신이 원인이 게시되지 - - 페이지 loads` 때

Answer 2

autoRun

<button onClick="autoRun()">Start</button> 
 
<button onClick="pause(); changeImage(-1); autoRun();">Previous Image</button> 
 
<button onClick="pause();">pause</button> 
 
<button onClick="pause(); changeImage(1); autoRun();">Next Image</button> 
 
<script> 
 
    var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"]; 
 
    var interval; 
 
    // = setInterval("changeImage(1)", 2000); 
 
    var imageNumber = 0; 
 
    var imageLength = images.length - 1; 
 

 
    function changeImage(x) { 
 
    imageNumber += x; 
 
    // if array has reached end, starts over 
 
    if (imageNumber > imageLength) { 
 
     imageNumber = 0; 
 
    } 
 
    if (imageNumber < 0) { 
 
     imageNumber = imageLength; 
 
    } 
 

 
    //document.getElementById("slideshow").src = 
 
    console.log(images[imageNumber]); 
 

 
    return false; 
 
    } 
 

 
    function autoRun() { 
 
    interval = setInterval("changeImage(1)", 2000); 
 
    } 
 

 
    function pause() { 
 
    clearInterval(interval); 
 
    interval = null; 
 
    } 
 
</script>