手動推進幻燈片

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;