<body>
<script type="text/javascript">
// Creación de los elementos html
var boton1 = document.createElement("button");
boton1.innerHTML = "<";
boton1.style.width = "100px";
var boton2 = document.createElement("button");
boton2.innerHTML = ">";
boton2.style.width = "100px";
var br = document.createElement("br");
var img = document.createElement("img");
img.height = 100;
img.width = 200;
var Inum = 1;
// Inserción de los elementos html
document.body.appendChild(img);
document.body.appendChild(br);
document.body.appendChild(boton1);
document.body.appendChild(boton2);
// Cambiar imagen con las flechas del teclado
document.onkeydown = checkKey;
function checkKey(e) {
// Compatibilidad con navegadores
e = e || window.event;
if (e.keyCode == '37') {
// flecha izquierda
if (Inum >= 2){Inum--;} // controla que Inum sea superior a 1 (img0 no existe)
img.src = 'img/img'+Inum+'.png';
}
else if (e.keyCode == '39') {
// flecha derecha
Inum++;if (Inum <=2){Inum++} // controla que Inum no sea superior al número de imagenes (uso: si hay 10 img usar el número 9)
img.src = 'img/img'+Inum+'.png';
}
}
// Cambiar imagen con los botones
boton1.onclick = function() {
img.src// =imagen 'img/img'+Inum+'.png';anterior
if (Inum >= 2){Inum--;} // controla que Inum sea superior a 1
img.src = 'img/img'+Inum+'.png';
};
boton2.onclick = function() {
// imagen siguiente
img.srcif =(Inum 'img<=2){Inum++} /img'+Inum+'.png';/ controla que Inum no sea superior al número de imagenes
Inum++;img.src = 'img/img'+Inum+'.png';
};
</script>
</body>
Ariel Montes
- 2.4k
- 1
- 10
- 30