鼠标放在小图片上，上面的大图会切换到相应的图片
html代码：
css代码：
js代码：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul .picture-small-li{
display: inline-block;border: 1px solid #000;
margin-right: 5px;
width:60px;
height:60px;
box-size:border-boxing;
}
.picture-big img{
border-radius: 3px;
width: 350px;
height: 350px;
padding: 3px;
border: 1px solid #ccc;
}
.picture-small{
margin-top:10px;
}
.picture-small-li img{
width:58px;
height: 58px;
box-size:border-boxing;
}
</style>
</head>
<body>
<div class="picture-big " >
<img src="img/TIM%E5%9B%BE%E7%89%8720180425160832.jpg" class="img-responsive"id="pic" />
</div>
<div class="picture-small" >
<ul >
<li id="li01"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160832.jpg" /></li>
<li id="li02"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg" /></li>
<li id="li03"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg" /></li>
<li id="li04"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160846.jpg" /></li>
<li id="li05"class="picture-small-li"><img src="img/TIM%E5%9B%BE%E7%89%8720180425160841.jpg" /></li>
</ul>
</div>
<script>
function show(canshu1,canshu2){
var li01 = document.getElementById(canshu1) //参数1为小图片的id,参数2为大图片的src
var pic = document.getElementById('pic') // pic为大图片div的id
li01.onmouseover = function(){
pic.src = canshu2; // 把参数2设为新的src(路径)
}
}
show("li01","img/TIM%E5%9B%BE%E7%89%8720180425160832.jpg") //调用show()，用所有大小图片参数
show("li02","img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg")
show("li03","img/TIM%E5%9B%BE%E7%89%8720180425160836.jpg")
show("li04","img/TIM%E5%9B%BE%E7%89%8720180425160846.jpg")
show("li05","img/TIM%E5%9B%BE%E7%89%8720180425160841.jpg")
</script>
</body>
</html>