Carousel picture that you can write with your hands:
<!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>This is the rendering:
It means which picture is clicked and which picture is enlarged! The mouse screenshot is invisible, and the p-picture is lazy. Put a text for you to understand.
The picture is that I like a pair of cps in the TV series. If you don’t like it, please contact me if it is infringement! ! !
Do not redistribute without permission! Leave your like before leaving♪ (^∇^*)