<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
// Definimos en un array todas las imagenes
var imagenes=["dado1.png", "dado2.png", "dado3.png", "dado4.png", "dado5.png", "dado6.png"];
// Definimos la imagen que se visualiza actualmente
// 0-primera, 1-segunda, ...
var imagen=0;
$(document).ready(function () {
// Recorremos todas las imagenes del array para añadirlar a nuestra pagina
// Cada imagen se añade oculta
$(imagenes).each(function(img){ $("#imagenes").append("<img src='"+imagenes[img]+"' style='display:none'>"); });
// Mostramos la primera
$("#imagenes img:first").show();
// Creamos el evento clic sobre cada una de las imagenes
$("#imagenes img").click(function(){
// Escondemos la imagen pulsada
$(this).hide();
// Aumentamos la variable que determina la imagen que estamos
// visualizando
imagen++;
// Si esta variable contadora, es mas grande que la cantidad de
// imagenes, nos posicionamos nuevamente en la primera
if(imagen>imagenes.length-1)
imagen=0;
// Mostramos la siguiente imagen segun la variable "imagen"
$("#imagenes img").eq(imagen).show(); });
});
</script>
</head>
<body>
<h1>Código que muestra como rotar un grupo de imagenes pulsando con el ratón
encima</h1>
<!-- contenedor que alberga las imagenes -->
<div id="imagenes">
</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (0)
No hay comentarios