有手就会写的轮播图：
<!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><!DOCTYPE html>
<html lang=
