Imagen de carrusel que puedes escribir con tus manos:
<!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>Esta es la representación:
¡Significa en qué imagen se hace clic y en qué imagen se amplía! La captura de pantalla del mouse es invisible y la imagen p es perezosa. Ponga un texto para que lo entienda.
La imagen es que me gustan un par de cps de la serie de televisión. Si no te gusta, ponte en contacto conmigo si se trata de una infracción. ! !
¡No redistribuir sin permiso! Deja tu me gusta antes de irte ♪ (^ ∇ ^ *)