大家好，我是web开发的新手，我想看看DOM(addEventListener(是如何工作的。所以我想用一张包含两张图片的图片制作幻灯片。这是我的html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<img src="picture2.png" alt="">
<button type="picture" name="button">Click Me</button>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
这是我的css
button{
display: block;
position: relative;
left: 7%;
}
img {
display: none;
}
这是我的js
var img = document.getElementsByTagName("img")[0];
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click",showPic,false);
function showPic(e) {
img.style.display="block";
}
我想做的就是当我第一次点击按钮时显示女孩的照片，当我第二次点击时显示婴儿的照片。请帮帮我：(https://i.stack.imgur.com/LhvYb.png
您的主要问题是您还没有设置第二个映像，然后，当您设置时，需要有代码在它们之间切换。
如何做到这一点有很多变化，但IMHO最简单、最可扩展的方法是将图像的URL保留在一个数组中，然后单击按钮，将imgsrc更新到下一个数组项。当您到达数组的末尾时，请从头开始。
顺便(但重要的是(注意，您使用的是带索引的.getElementsByTagName()，这不是一种很好的获取DOM元素引用的技术，应该避免。相反，您应该使用现代API，如.querySelector()和.querySelectorAll()(在上一个链接中讨论过(。
最后，像button这样的表单字段元素应该只有在嵌套在将在某个地方提交数据的form内部时才具有name属性，并且该元素的value希望与其余的form数据一起提交。
// Store URLs in an array
let urls = ["https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Check_mark.svg/28px-Check_mark.svg.png", "https://www.barcoproducts.com/media/catalog/product/cache/1de18e47886e8a56e4b449f2e3cefe99/R/W/RW925_630.jpg"];
let index = 0; // Keep a reference to which URL is being used
// There are different ways to get element references:
var img = document.querySelector("img");
var button = document.getElementById("button");
button.addEventListener("click",showPic);
function showPic(e) {
// Don't work with inline styles. Just work with
// CSS classes and the element's classList
img.classList.remove("hidden");
// Adjust the image source
if(index < urls.length - 1){
index++; // Increase the index
} else {
index = 0; // Reset index
}
// Change the image source
img.src = urls[index];
}button{
display: block;
position: relative;
left: 7%;
}
.hidden {
display: none;
}
img { width:50px; }<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Check_mark.svg/28px-Check_mark.svg.png" alt="image" class="hidden">
<button type="picture" id="button">Click Me</button>
<script src="index.js" charset="utf-8"></script>
</body>
</html>