先上效果图：
css 代码：
代码语言：javascript复制*{
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;
}html代码：
代码语言：javascript复制<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>jq 代码 ：
代码语言：javascript复制$(".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)
})ok！一个简单的图片切换完成了
