<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-JavaScript-商品展示</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 430px;
margin: 100px auto;
border: 1px solid #000;
}
ul{
list-style: none;
display: flex;
justify-content: space-between;
}
ul>li>img{
width: 80px;
height: 80px;
vertical-align: bottom;
}
ul>li{
border: 2px solid transparent;
box-sizing: border-box;
}
.current{
border: 2px solid skyblue;
}
</style>
</head>
<body>
<div>
<img src="images/pic1.jpg" alt="">
<ul>
<li><img src="images/pic1.jpg" alt=""></li>
<li><img src="images/pic2.jpg" alt=""></li>
<li><img src="images/pic3.jpg" alt=""></li>
<li><img src="images/pic4.jpg" alt=""></li>
<li><img src="images/pic5.jpg" alt=""></li>
</ul>
</div>
<script>
// 1.拿到需要操作的元素
let oImg = document.querySelector("div>img");
let oItems = document.querySelectorAll("li>img");
// 2.给每一个小图添加移入和移出事件
for(let item of oItems){
// 监听移入事件
item.onmouseenter = function () {
// 1.给当前小图的父元素添加边框
this.parentNode.className = "current";
// 2.将当前小图的图片地址设置给大图
oImg.src = this.src;
}
// 监听移出事件
item.onmouseleave = function () {
// 1.移除当前小图父元素的边框
this.parentNode.className = "";
}
}
</script>
</body>
</html>
dom啦15 商品展示
原创
©著作权归作者所有:来自51CTO博客作者陈业贵的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:dom啦19 闭包
下一篇:dom啦17 焦点事件
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
商品详情API接口展示
商品详情接口的应用场景及请求示例
ci v9 rvm