Question

我有一组名为img1, img2, img3, img4,......., imgx.的图片因此，我想编写一个JavaScript来在img1处显示图片document.onload()，并在第一次点击图片时将其更改为{{1接下来，第二次点击要在img2处更改的图片，然后点击每个img3按钮上的下一张图片。通过这种方式，我甚至需要NEXT按钮才能返回之前查看的图像。

如何实现这个？

Answer 1

var currentImage = 1;

window.onload = function() {
    showImage();
};

document.getElementById("next").onclick = function() {
    currentImage++;
    showImage();
}

function showImage() {
    document.getElementById("image").src = "img" + currentImage + ".jpg";
}

这些是基础知识，应该可以帮助您入门。如果您需要帮助实现其余部分，请询问我们您要特别做什么以及您尝试了什么。提示，你需要处理没有“下一个”图像显示的情况。你想让它回到开始还是不工作？

Answer 2

<script type="text/javascript">

var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg"); 
var cur_image = 0;

function goNextImage() {
    var img = document.getElementById('image');
    cur_image++;
    if (cur_image == images.length) {
        cur_image = 0;
    }
    img.src = images[cur_image];
}

</script>

<img src="img/image1.jpg" id="image" onclick="goNextImage()" />

用于更改图像的JavaScript

2 个答案: