使用 Javascript 更改图像源 - 基本 function 不起作用

Question

JavaScript 新手，请多多包涵。 我正在尝试创建一个包含 2 个图像的轮播，点击时更改。 我试图弄清楚但没有运气。 谢谢。

 function changeImg() { if (document.getElementById("carousel-image").src == "https://via.placeholder.com/150?text=img1") { document.getElementById("carousel-image").src = "https://via.placeholder.com/150?text=img2"; } else { document.getElementById("carousel-image").src = "https://via.placeholder.com/150?text=img1"; } } document.getElementById("carousel-image").addEventListener("click", changeImg);

 <img src="https://via.placeholder.com/150?text=img1" id="carousel-image" alt="space nebula" class="topimages"> <script src="my-script.js"></script>

Answer 1

你的代码应该可以工作，但这里有一个更强大的 ES6 版本，它应该适用于不仅仅是两个图像的情况。

function changeCarouselImage(event) {
    const carouselImages= [
        "https://via.placeholder.com/150?text=img1",
        "https://via.placeholder.com/150?text=img2",
    ];

    const currentImage = event.target.src;
    const currentImageIndex = carouselImages.findIndex(img => img === currentImage);

    const nextImageIndex = currentImageIndex + 1;
    if (nextImageIndex >= carouselImages.length){
        nextImageIndex = 0;
    }

    event.target.src = carouselImages[nextImageIndex];
}

document.getElementById("carousel-image").addEventListener("click", changeCarouselImage);