jq书写点击换图

*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 500px;
			height: 500px;
			background: #e5e5e5;
			margin: 0 auto;
		}
		.box div{
			width: 400px;
			height: 300px;
			margin: 0 auto;
		}
		.box div img{
			width: 400px;
			height: 300px;
			
		}
		.box ul{
			width: 400px;
			height: 300px;
			margin: 0 auto;
		}
		.box ul li{
			list-style: none;
		}
		.box ul li img{
			width: 80px;
			height: 80px;
			float: left;
			margin-left: 10px;
			margin-top: 10px;
		}
		.box ul li:first-child img{
			border: 3px solid #f00;
		}

<div class="box">
			<div>
				<img src="img/1.jpg" />
			</div>
			<ul>
				<li>
					<img src="img/1.jpg" />
				</li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
				<!--<li><img src="img/5.jpg" /></li>
				<li><img src="img/6.jpg" /></li>
				<li><img src="img/7.jpg" /></li>-->
			</ul>
		</div>

$(".box ul img").on("click",function(){
			//点击img 时让他加边框
			$(this).css("border","3px solid #f00").parent().siblings().children().css("border","none")
			// 点击换图 
			// 1. 获取点击图片的路径
			var oImg=$(this).attr("src")
			console.log(oImg)
			//2. 换图操作 
			$(".box div img").attr("src",oImg)
			
			
		})