JavaScript点击小图展示大图
Posted 码妈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript点击小图展示大图相关的知识，希望对你有一定的参考价值。
javascript点击小图展示大图
点击小图展示大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击小图展示大图</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 670px;
border: 1px solid #000;
margin: 100px auto;
}
ul{
list-style: none;
display: flex;
justify-content: space-between;
}
ul>li>img{
width: 120px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="images/ad1.jpg" alt="">
<ul>
<li><img src="images/ad1.jpg" alt=""></li>
<li><img src="images/ad2.jpg" alt=""></li>
<li><img src="images/ad3.jpg" alt=""></li>
<li><img src="images/ad4.jpg" alt=""></li>
<li><img src="images/ad5.jpg" alt=""></li>
</ul>
</div>
<script>
let oImg = document.querySelector("div>img"); // 获取大图图片
let oItems = document.querySelectorAll("li>img"); // 获取每一个图片 (小图)
console.log(oItems);
// console.log(oItems);
for(let item of oItems){
// console.log(item); // 获取了5个img元素 <img src="images/ad1.jpg" alt="">...
item.onclick = change; // 点击其中一个img元素执行change函数
}
function change() {
// console.log(oImg.src); // images/ad2.jpg 原来的图片地址
// console.log(this.src); // images/ad3.jpg 点击后的新图片地址
oImg.src = this.src; // 将点击后的新图片地址 赋值给 原来的图片地址
}
</script>
</body>
</html>
结果
| 点击前(默认1) | 点击第三张小图 |
|---|---|
 |  |
以上是关于JavaScript点击小图展示大图的主要内容，如果未能解决你的问题，请参考以下文章