使用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; 
    } 
}