鼠标点击不同的商品，显示对应的商品大图；被选中的商品，变为红色边框。

最新推荐文章于 2021-06-03 02:42:45 发布

天空守护云

最新推荐文章于 2021-06-03 02:42:45 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44606660/article/details/86604963

本文展示了一个使用CSS进行样式设定并结合JavaScript实现图片切换效果的实例。通过为列表项设置不同状态下的样式，如边框颜色和尺寸，以及图片大小，实现了鼠标悬停时的视觉反馈。同时，通过遍历获取所有列表项，并为每个列表项添加单击事件，使得点击时可以更换大图显示的图片，同时改变边框颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul,li{list-style: none;}
		.box{border: 1px solid gray;width: 700px;height: 500px;text-align: center;}
		#pic{width: 400px;height: 300px;margin-top: 30px;}
		ul li{width: 150px;height: 100px;text-align: center;float: left;margin-right: 5px;border: 1px solid gray;
			}
		ul li img{width: 140px;height: 90px;margin-top: 5px;}
		ul li:hover img{width: 144px;height: 94px;margin-top: 3px;}
		ul li.sel{border-color: red;border-width: 1.5px;}
		ul li.sel img{width: 144px;height: 94px;margin-top: 3px;}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/1.jpg" alt="" id="pic">
		<ul>
			<li class="sel"><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
		</ul>
	</div>
	<script type="text/javascript">
		/*
			1.鼠标点击不同的商品，显示对应的商品大图
			2.被选中的商品，变为红色边框
		*/
		
			var lis=document.getElementsByTagName("ul")[0].getElementsByTagName('li');//li
			var oImg=document.getElementById('pic');

			//为li添加单击事件
				for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(){
					oImg.src=this.children[0].src;
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
					}
					this.className="sel";
				};
			}
	</script>
</body>
</html>