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 回答