1

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

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

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

1 回答 1

1

线

image++;

应该

imageIndex++;

为了避免这样的进一步问题，onclick您可以代替定义：

navRight.onclick = changeImage;
于 2013-10-27T05:42:14.700 回答