使用JS库实现点击小图显示对应的大图

最新推荐文章于 2021-05-11 19:24:12 发布

天空守护云

最新推荐文章于 2021-05-11 19:24:12 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/weixin_44606660/article/details/87949316

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		ul,li{list-style-type: none;}
		ul li{float: left;width: 120px;height: 80px;margin-right: 10px;border: 1px solid gray;}
		ul li img{width: 120px;height: 80px;}
		ul li:hover{cursor: pointer;}
	</style>
	<script type="text/javascript" src="js/1.js"></script>
</head>
<body>
	<img src="images/l1.jpg" alt="" id="pic">
	<ul>
		<li><img src="images/l1.jpg" alt=""></li>
		<li><img src="images/l2.jpg" alt=""></li>
		<li><img src="images/l3.jpg" alt=""></li>
		<li><img src="images/l4.jpg" alt=""></li>
	</ul>

	<div></div>
	<div></div>
	<div></div>
	<script type="text/javascript">
		$().getTag('li').click(function(){
			var s=$().getTag('img',this).attr('src');
			$().getId('#pic').attr('src',s);
		});

		// $().getTag('div').val('哈哈');
	</script>

</body>
</html>