<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.container{
width:600px;
margin:0 auto;
border:1px solid #000;
}
.container>ul{
overflow: hidden;
}
.container>ul>li{
float:left;
}
.main>img{
width:400px;
height:400px;
}
</style>
<div class='container'>
<ul>
<li>
<a href="#">
<img src="img/home1.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/home2.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/home3.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/home0.jpg">
</a>
</li>
</ul>
<div class='main'>
<img src="img/home1.jpg">
</div>
</div>
<script type="text/javascript">
var img=document.querySelectorAll('.container>ul>li>a>img');
console.log(img);
var mainImg=document.querySelector('.main>img');
console.log(mainImg);
for(var i=0;i<img.length;i++){
img[i].onclick=function(){
mainImg.src=this.src;
}
}
</script>
