直接上图
当鼠标移动到下面的小图片的时候,上面的大图就会显示对应的下面的图片
直接上代码
<style>
.big {
width: 415px;
height: 400px;
}
.small>img {
width: 100px;
height: 100px;
}
</style>
<body>
<div>
<img src="./ju.jpg" alt="" class="big">
</div>
<div class="small">
<img src="./ju.jpg" alt="">
<img src="./ying.jpg" alt="">
<img src="./hu.jpg" alt="">
<img src="./bu.jpg" alt="">
</div>
<script>
//核心逻辑:把小图的src给大图
//先获取到所有的img标签
let img = document.querySelectorAll("img")
//对所有的img标签进行遍历
for (let i = 0; i < img.length; i++) {
//当点击哪一个图片的时候,就把第一张大图的图片地址变成当前这张图片的地址
img[i].onmouseover = function () {
img[0].src = this.src;
}
}
</script>
</body>