Javascript简单图片库

问题描述

我试图制作一个简单的JavaScript照片库，其中您可以通过2个按钮将img更改为上一个和下一个img，共有9张图片，如果显示了第9张图片，则按n，它应该显示第一个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))

谢谢

解决方法

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

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>

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

此行的打字错误：

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

chaneImg(1)至changeImg(1)

您也没有条件来检查它的反方向：

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

所以尝试添加

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

html image-gallery javascript

Javascript简单图片库

问题描述

解决方法

相关问答