使用JavaScript更改图像源-基本功能不起作用

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);