如何解决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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。