왜 내 자바 스크립트 슬라이드가 다시 설정되지 않습니까?

사용자가 아무 것도 클릭하지 않으면 매 4 초마다 슬라이드를 통과하는 회전식 슬라이드 쇼가 있습니다. 그러나 내가 얻는 문제는 예를 들어 사용자가 1 초 후 슬라이드를 클릭 한 다음 2 초 후 다음 슬라이드를 클릭하면 4 초 후에 다음 슬라이드가 나타나지 않는다는 것입니다. JS 코드는 다음과 같습니다 :왜 내 자바 스크립트 슬라이드가 다시 설정되지 않습니까?

var arr = []; 
arr[0]= new Image(); 
arr[0].src = "1.jpg"; 
arr[1]= new Image(); 
arr[1].src = "2.jpg"; 
arr[2]= new Image(); 
arr[2].src = "3.jpg"; 

titleArray = new Array(); 
titleArray[0] = "first"; 
titleArray[1] = "second"; 
titleArray[2] = "third"; 

var i=0; 

function slide(){ 
document.getElementById("img1").src= arr[i].src; 
document.getElementById("title").innerHTML = titleArray[i]; 
    i++; 
    if(i==arr.length){ 
     i=0; 
    } 
setTimeout(function(){ slide(); },4000); 
}

HTML은 다음과 같습니다 사용자가 슬라이드 의도 사초 전에 변경됩니다 이미지를 클릭 할 때 당신은 의미

<!doctype html> 
<html lang="en"> 
<head> 
<title>Carousel</title> 

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700'  rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="style.css"> 
</head> 

<body onLoad="slide();"> 

<div class="image"> 
    <img src="1.jpg" width="510" height="390" id="img1"> 
    <a href="JavaScript:slide(this)"> 
<img src="carousel-label-box.png" id="img2" width="310" height="190"> 
    </a> 
    <h1 id="title">first</h1> 

</div> 
<script src="script.js"></script> 
</body> 
</html>

출처

2014-02-19 user3308889

clearTimeout()을 호출하여 인터럽트 한 다음 사용자가 단순히 slide를 호출하는 대신 이미지를 클릭하면 다시 설정해야합니다.

편집 : 사용자가 클릭 할 때 여전히 slide() 함수를 호출해야한다는 점을 잊어 버리십시오.

출처

2014-02-19 15:26:48 Joao

방금 함수 슬라이드에서 setTimeout을 호출 한 것으로 나타났습니다. 이렇게하면 사용자가 이미지를 클릭 할 때마다 slide() 함수의 다른 Timeout이 원래 이미지와의 사이에 호출됩니다. 함수 밖에서 setTimeout을 호출해야합니다. 작동하는지 알려주세요. – Joao

왜 내 자바 스크립트 슬라이드가 다시 설정되지 않습니까?

답변

관련 문제