点击屏幕按钮,更换对应的图片功能实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#buttons button {
margin-right: 20px;
}
img {
width: 200px;
height: 200px;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="buttons">
</div>
<img src="" alt="">
<script>
// 根据数据向页面中添加按钮和图片
var imgs = [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
];
var divButtons = document.getElementById("buttons");
var img = document.getElementsByTagName("img")[0];
img.src = imgs[0];
// 遍历图片数组
imgs.forEach(function(src, i) {
// 创建按钮 填充内容 追加到div中
var btn = document.createElement("button");
btn.innerText = `第${i+1}张图片`;
divButtons.appendChild(btn);
// 将数组中图片的地址设置为button的属性
btn.dataset.src = src;
});
// 事件委托绑定点击事件
divButtons.onclick = function(e) {
// 点击按钮 设置img的src属性为button的src属性
if (e.target.dataset.src) {
img.src = e.target.dataset.src;
}
}
</script>
</body>
</html>