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

2020-10-28 14:47:55 浏览数 (1)
代码语言：javascript复制
<!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>
src

0 人点赞