Javascript简单的图片库答案

【问题标题】：Javascript simple image galleryJavascript简单的图片库
【发布时间】：2020-09-02 14:06:24
【问题描述】：

我正在尝试制作一个简单的 javascript 照片库，您可以在其中通过 2 个按钮将 img 更改为上一张和下一张，有 9 张图像，如果显示第 9 张图像并且您按下一步，它应该显示第一个 img，有人可以帮我吗？我的代码不起作用。

HTML：

<body>
<img src="img (1).jpg" alt="" height="200">
<button id="previous">previous image</button>
<button id="next">next image</button>

JS：

<script>
let counter = 1;
let img = document.querySelector("img");
let changeImg = function (type) {
    if (type == 1) {
        counter++   
    } else {
        counter--
    }
    if (counter <= 0) {
        counter = 9
    }
    img.setAttribute("src", "img ("+counter+").jpeg")
}

let previous = document.getElementById("previous")
let next = document.getElementById("next")

previous.addEventListener("click", chaneImg(1))
next.addEventListener("click", changeImg(2))

谢谢

【问题讨论】：

标签： javascript html image-gallery

【解决方案1】：

您的问题在于您添加听众的方式：

previous.addEventListener("click", changeImg(1))

应该是

previous.addEventListener("click", (e) => changeImg(1))

第一个在加载时调用 changeImage。

let counter = 1;
let img = document.querySelector("img");
let changeImg = function(type) {
  if (type == 1) {
    counter++
  } else {
    counter--
  }
  if (counter <= 0) {
    counter = 9
  }
  img.setAttribute("src", "img (" + counter + ").jpeg")
}

let previous = document.getElementById("previous")
let next = document.getElementById("next")

previous.addEventListener("click", (_e) => changeImg(1))
next.addEventListener("click", (_e) => changeImg(2))

<body>
  <img src="https://i.imgur.com/Att5gPe.jpg" alt="" height="200">
  <button id="previous">previous image</button>
  <button id="next">next image</button>
</body>

【讨论】：

我试过了，现在它加载了第一个 img (1).jpg ，并且在我完美地点击上一个/下一个之后，src 也可以工作，但由于某种原因，图像仍然没有显示，当我点击下一个然后上一个回到第一个时，甚至不是第一个
我在代码中使用了 +jpeg，但它应该只是 +jpg，非常感谢你现在一切正常 :)

【解决方案2】：

未测试，但我看到的有几件事是：

这一行的错字：

previous.addEventListener("click", changeImg(1))

chaneImg(1) 到 changeImg(1)

你也没有条件检查这个的逆：

if (counter <= 0) {
    counter = 9
}

所以尝试添加

if (counter >= 9) {
    counter = 1
}

【讨论】：