有手就会写的轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="base" style="width: 300px;height: 300px;border: red 2px solid"><img id="bigimg" src="images/01.jpg"></div>
<div id="imgUI">
<div style="float: left;width: 50px;height: 50px;border: red 1px solid"><img src="img/01.jpg"></div>
<div style="float: left;width: 50px;height: 50px;border: red 1px solid"><img src="img/02.jpg"></div>
<div style="float: left;width: 50px;height: 50px;border: red 1px solid"><img src="img/03.jpg"></div>
</div>
<script>
var imgUI = document.getElementById('imgUI');
var img = imgUI.getElementsByTagName('img');
img[0].onmouseover = function () {
document.getElementById('bigimg').src = img[0].src;
};
img[1].onmouseover = function () {
document.getElementById('bigimg').src = img[1].src;
};
img[2].onmouseover = function () {
document.getElementById('bigimg').src = img[2].src;
};
</script>
</body>
</html>这是效果图：
意思就是鼠标点到哪个图，哪个图放大呗！鼠标截图看不见，p 图又懒，放个文字你理解一下啦。
图片是我喜欢电视剧里面的一对 cp,是不喜勿喷，要是侵权请联系我！！！
未经允许，禁止转载！留下你的赞再走呗♪(^∇^*)