Galería de imágenes 3 con Jquery

martes, 29 de mayo de 2012

Galería de imágenes 3 con Jquery

En la siguiente Galería las imágenes irán cambiando a medida que se pase el ratón por encima de la imagen y se detendrá una vez que el ratón esté fuera de la imagen, la galería tiene cuatro imágenes, aunque se le pueden añadir cuantas se quieran tener, en la Galería de Imágenes 1 viene como hacerlo.

Pasa el ratón sobre la imagen siguiente...

El código de la galería de imágenes es...

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>

 <script type="text/javascript">
 
 var milisegundos = 0;

 var siguiente = 0;
 var imagen = new Array("https://lh4.googleusercontent.com/-uOp6B90Qc8w/T8T7-30ow8I/AAAAAAAAAgE/oIneuwouQAQ/s400/1.jpg", "https://lh6.googleusercontent.com/-_Tzlz89xwjc/T8T8FzruVHI/AAAAAAAAAgU/jBGuqzKN2BQ/s474/2.jpg", "https://lh4.googleusercontent.com/-zpOfJCVC8xU/T8T8KIc7PyI/AAAAAAAAAgo/8mdbdJyw17M/s268/3.png", "https://lh6.googleusercontent.com/-xz9ocYPZ__c/T8T8Oxk2guI/AAAAAAAAAg8/nfHv9vqWFS8/s395/4.png");

 $(document).ready(function() {
 $(".imagen").mouseover(function() {
 timer = setTimeout('temporizador()', milisegundos);
});

 $(".imagen").mouseout(function() {
 clearTimeout(timer)
});

});

function temporizador() {
$(document).ready(function() {
$(".imagen").attr("src", imagen[siguiente]);
$(".imagen").css({position: "absolute"});
$(".imagen").animate({left: "+=150", width: "-=50"}, 1000, function(){
$(".imagen").animate({left: "-=150", width: "+=50"}, 1000);
}).delay(100);
});
siguiente = siguiente + 1;

if (siguiente > 3) {
siguiente = 0;
}
}


</script>

</head>

<body>


<style type="text/css">
#caja {
width: 150px;
height: 150px;
background-color: grey;
padding: 10px;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
</style>

<div id="caja">
<img class="imagen" style="cursor: pointer;" src="https://lh4.googleusercontent.com/-uOp6B90Qc8w/T8T7-30ow8I/AAAAAAAAAgE/oIneuwouQAQ/s400/1.jpg" width="150" height="150">
</div>






</body>

</html>

No hay comentarios:

Publicar un comentario

jQuery Manual

martes, 29 de mayo de 2012

Galería de imágenes 3 con Jquery

No hay comentarios:

Tutoriales:

Entradas populares