dom啦11 图片展示 核心：在于点击li＞img里面的哪一个就把this.src赋值给div＞img的src
dom啦11 图片展示 核心：在于点击li＞img里面的哪一个就把this.src赋值给div＞img的src
贵哥的编程之路
发布于 2020-10-28 14:47:55
发布于 2020-10-28 14:47:55
文章被收录于专栏：用户7873631的专栏
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
{
width: 670px;
border: 1px solid red;
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 type="text/javascript">
let oImg = document.querySelector("div>img");
let oItems = document.querySelectorAll("li>img");
for(let item of oItems)
{
item.onclick=change;
//执行点击事件后执行change方法。
}
function change()
{//然后把li里面的img赋值给div>img。
oImg.src=this.src;//就行了
}
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
