图片点击切换。

最新推荐文章于 2022-06-23 13:23:20 发布

原创最新推荐文章于 2022-06-23 13:23:20 发布 · 667 阅读

CC 4.0 BY-SA版权

<!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');
			var index=0;//保存当前被选中的li的索引   默认值为0(默认第一个被选中)

			//为li添加单击事件
				for(var i=0;i<lis.length;i++){
					lis[i]._index=i;//给每个li添加一个新的属性，并赋值为i。
					lis[i].onclick=function(){
						oImg.src=this.children[0].src;//显示对应的商品大图
						//被点击前的被选中的li样式取消		
						lis[index].className="";
						//被点击的追加class
						this.className="sel";
						//修改index
						index=this._index;//取出被点击的li的索引，赋值给index
					};
			}
	</script>
</body>
</html>