使用onclick事件停止並開始幻燈片放映

Question

我想要控制此幻燈片以在#mainImage上使用onclick來開始/停止。在這一點上，我可以讓幻燈片停止，但是我一直在關於如何使用onclick重新啓動它的邏輯。理想情況下，我希望幻燈片從停止的數組位置繼續，而不是完全重新開始。我的直覺告訴我，這可以用一些條件語句來解決，但我無法讓它工作。感謝您的任何反饋！

//Grab img 
var mainImage = document.getElementById("mainImage"); 

//Create image array 
var imageArray = ["images/drifter.jpg","images/drifter3.jpg","images/drifter4.jpg"]; 

//Set up array index 
var imageIndex = 0; 

//Create function to cycle through images 
function changeImage() { 
    mainImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex++; 
    if(imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

//Call cycle function 
var intervalHandle = setInterval(changeImage,3000); 

mainImage.onclick = function() { 
    clearInterval(intervalHandle); 
} 

Answer 1

添加標記知道它何時停止，何時應該繼續

//Grab img 
var mainImage = document.getElementById("mainImage"); 

//Create image array 
var imageArray = ["images/drifter.jpg","images/drifter3.jpg","images/drifter4.jpg"]; 

//Set up array index 
var imageIndex = 0; 
// here the flag 
var stop = false; 

//Create function to cycle through images 
function changeImage() { 
    mainImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex++; 
    if(imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

//Call cycle function 
var intervalHandle = setInterval(changeImage,3000); 

mainImage.onclick = function() { 
    if(!stop){ 
     clearInterval(intervalHandle); 
     stop = true; 
    } else { 
     intervalHandle = setInterval(changeImage,3000); 
     stop = false; 
    } 
}