使用onclick事件停止并开始幻灯片放映
问题描述:
我想要控制此幻灯片以在#mainImage上使用onclick来开始/停止。在这一点上,我可以让幻灯片停止,但是我一直在关于如何使用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);
}
答
添加标记知道它何时停止,何时应该继续
//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;
}
}