使用 Javascript 更改图像源 - 基本功能不起作用答案

【问题标题】：Change image source with Javascript - basic function not working使用 Javascript 更改图像源 - 基本功能不起作用
【发布时间】：2020-03-17 13:19:43
【问题描述】：

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>

【问题讨论】：

在我创建了一个 sn-p 并添加了一个存在的图像后，似乎可以按设计工作
为我工作 - 只需检查您的图像路径
更简单：function changeImg() { var src = document.getElementById("carousel-image").src; document.getElementById("carousel-image").src = src.indexOf("img1") !== -1 ? "img2.jpg" : "img1.jpg"; }
按F12和网络查看你的图片是否加载完毕

标签： javascript image addeventlistener src

【解决方案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);

【讨论】：