Javascript 使用onclick事件停止和启动幻灯片放映

我想使用onclick on#main image控制此幻灯片的开始/停止。在这一点上，我可以让幻灯片停止，但我仍然停留在如何使用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);  
}

---

添加一个标志以了解何时停止以及何时应继续

//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;
    }
}