功能:
当鼠标经过一张小的图片的时候,上面展现出对应的大图片 ,效果如下。
用到的知识点比较少,主要是鼠标经过事件,经过哪一张图片,将对应图片的src赋值给上面大盒子里面图片的src 地址值
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big {
height: 624px;
width: 624px;
}
.small>img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./img/QQ图片20230415084047.jpg" alt="" class="big">
</div>
<div class="small">
<img src="./img/QQ图片20230415084047.jpg" alt="">
<img src="./img/QQ图片20230415084115.jpg" alt="">
<img src="./img/QQ图片20230415084119.jpg" alt="">
<img src="./img/QQ图片20230415084123.jpg" alt="">
<img src="./img/QQ图片20230415084127.jpg" alt="">
<img src="./img/QQ图片20230415084132.jpg" alt="">
</div>
<script>
//逻辑:本质是,放到那个图片上面,就是将小图的src赋值给大图的src
//鼠标的移入移除事件
let imgs = document.querySelectorAll('img');
for (let i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function () {
//把小图的src赋值给大图的src
imgs[0].src = this.src;
}
}
</script>
</body>
</html>
快去试试吧🦄
如果想要图片可以留言,后台踢我呦😉~~~