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

最新推荐文章于 2021-11-11 20:50:10 发布

天空守护云

最新推荐文章于 2021-11-11 20:50:10 发布

阅读量427

点赞数

本文链接：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>

优惠劵

天空守护云

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS库实现点击小图显示对应的大图

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{padding: 0;margin: 0;} ul,li{list-s
复制链接

扫一扫