dom啦11 图片展示核心：在于点击li＞img里面的哪一个就把this.src赋值给div＞img的src

最新推荐文章于 2022-09-19 17:50:41 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-09-19 17:50:41 发布

阅读量591

点赞数 1

分类专栏： JSDOM

本文链接：https://blog.csdn.net/qq_37805832/article/details/108425938

版权

JSDOM 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>