Question

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

我创建了一个前进按钮，我正在使用onclick功能。我已经能够通过一张图片进行onclick工作以推进节目，但是一旦出现新图像，只有在5秒后自动出现以下图像时，onclick才会起作用。然后onclick似乎再次工作。这是一个连续的循环。

即： - 出现第二张图像 - 单击右前进按钮，第三个图像立即出现 - 点击第3张图像，没有任何反应（5秒后自动前进到第4张图像） - 出现第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;

手动推进幻灯片

1 个答案: