RETO CAROUSEL CON DOM
Realizar un carrusel con mínimo 4 imágenes usando DOM. Se recibe 26 de agosto sobre 5 hasta las 3 y 20. SIN IA POR FAVOR
<!DOCTYPE html>
<html>
<head>
<title>Carrusel</title>
<style>
img {
width: 300px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<img src="https://media.istockphoto.com/id/1810940843/photo/close-up-of-two-black-metal-9mm-automatic-pistols-with-bullets-all-placed-on-a-cement-table.jpg?s=1024x1024&w=is&k=20&c=zZ9CK2O-nIaWe7aHZrPUxro6dMdhYvjJXpx8pZY4xzg=" id="img0">
<img src="https://media.istockphoto.com/id/841471506/photo/the-gun-and-gun-short-black-pistol.jpg?s=1024x1024&w=is&k=20&c=DBMRTAjILsJcIDsn31e0vCdxhCndL7CDD5-uqM_jI6Y=" id="img1">
<img src="https://media.istockphoto.com/id/513983146/photo/mashine-guns-and-ammunitions-on-the-wooden-surface.jpg?s=1024x1024&w=is&k=20&c=EPN73cNSXxB1NVxRNfk9qvZHR0clBk8WulknVSQpkBg=" id="img2">
<img src="https://media.istockphoto.com/id/962465738/photo/air-soft-gun-with-protective-glasses-and-a-lot-of-bullets.jpg?s=1024x1024&w=is&k=20&c=HGwb1_BBgD4U0D9IsY3N17RwRk4ecKgjgPmrPXu91Ic=" id="img3">
<br><br>
<button onclick="cambiar()">Siguiente</button>
<script>
var actual = 0;
document.getElementById("img0").style.display = "block";
function cambiar() {
document.getElementById("img" + actual).style.display = "none";
actual++;
if (actual > 3) {
actual = 0;
}
document.getElementById("img" + actual).style.display = "block";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<img src="https://cdn-icons-png.flaticon.com/128/271/271220.png" alt="" id="izq">
<img src="https://cdn-icons-png.flaticon.com/128/271/271228.png" alt="" id="der">
</section>
<script>
function moverizq(){
console.log("mover imagen a la izquierda");
}
function moverder(){
console.log("mover imagen a la derecha");
}
const imgizq=document.getElementById("izq")
imgizq.addEventListener('click', moverizq)
const imgder=document.getElementById("der")
imgder.addEventListener('click', moverder)
</script>
</body>
</html>
Comments
Post a Comment