Galería de imágenes 2 con Jquery

martes, 29 de mayo de 2012

Galería de imágenes 2 con Jquery

En esta ocasión los efectos de la galería de imágenes son producidos por la función animate() de Jquery, igual que en la Galería de imágenes 1 consta de un array con 4 imágenes, que cada cierto intervalo de tiempo cambia.

GALERÍA DE IMÁGENES 2

El código de esta galería de imágenes es el siguiente...

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

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

 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");
timer = setTimeout('temporizador()', milisegundos);


function temporizador() {
$(document).ready(function() {
$(".imagen").attr("src", imagen[siguiente]);
$(".imagen").css({position: "absolute"});
$(".imagen").animate({left: "+=150", width: "-=150"}, 1500, function(){
$(".imagen").animate({left: "-=150", width: "+=150"}, 1500);
timer = setTimeout('temporizador()', milisegundos);
});
});
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" 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 2 con Jquery

No hay comentarios:

Tutoriales:

Entradas populares