手动推进幻灯片

Question

我是编程新手，我正在努力在我正在开发的网站上播放幻灯片。我创建了一个每5秒推进一次的幻灯片，但是我希望允许用户手动推进（或反转）演出。

我创建了一个向前移动按钮，我使用的是onclick函数。我已经能够用onclick工作来将节目推进一张图片，但是一旦出现新图像，5秒后自动出现以下图像时，onclick不起作用。然后onclick似乎再次工作。这是一个连续的循环。

即： - 2图像出现 - 点击右侧前进按钮和第三图像看起来马上 - 点击第3图像上并没有任何反应（前进到第四图像5秒后自动） - 4图像出现，我可以点击右前进按钮，第5张图片立即出现，但是同样的问题点击新图片什么也不做。

这里是我的代码：

var myImage = document.getElementById("mainImage"); 
var navLeft = document.getElementById("navLeft"); 
var navRight = document.getElementById("navRight"); 

var imageArray = ["images/ss_img001.jpg","images/ss_img002.jpg","images/ss_img003.jpg","images/ss_img004.jpg", 
        "images/ss_img005.jpg","images/ss_img006.jpg","images/ss_img007.jpg","images/ss_img008.jpg"]; 
var imageIndex = 0; 


navRight.onclick = function() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    image++; 
    if (imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

function changeImage() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex++; 
    if (imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

setInterval(changeImage,5000); 

Answer 1

线

image++; 

应该

imageIndex++; 

为了避免这样进一步的问题，而不是onclick定义可以改为：

navRight.onclick = changeImage;