16/08/2012, 21:13
|
| | | Fecha de Ingreso: mayo-2012 Ubicación: Bogota
Mensajes: 45
Antigüedad: 12 años Puntos: 0 | |
| Repetir galeria aleatoria en javascript
tengo esta galeria, el problema es que cuando acaba de elegir todas las iamgenes al azar, se detiene, como hago para que vuelva y se repita indefinidamente?
- si es posible, que las imagenes esten centradas, y que la primera imagen aleatoria aparezca con un fade in, o opacidad 0 a 100, pero sobre todo lo de repetir el ciclo.
aqui esta el codigo:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#slideshow-container { position:relative; }
#slideshow-container img { position:absolute; }
</style>
</head>
<body>
<div id="slideshow-container" style="height:892px; width:587px">
<div id="slideshow">
<div>
<img src="http://davy0324.netne.net/dummys/dummy1.jpg">
<img src="http://davy0324.netne.net/dummys/dummy2.jpg">
<img src="http://davy0324.netne.net/dummys/dummy3.jpg">
<img src="http://davy0324.netne.net/dummys/dummy4.jpg">
<img src="http://davy0324.netne.net/dummys/dummy5.jpg">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$('img').wrapAll('<div id="slideshow-container img"></div>');
</script>
<script type="text/javascript">
//extending jQuery with ':random' selector, best put into separate plugin js file
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
random: function(a, i, m, r) {
if (i == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
};
return i == jQuery.jQueryRandom;
}
});
//end :random extend
$(function() {
$('#slideshow img').not(':random').hide(); //hide all images except one initially
setInterval(function(){
$('#slideshow img:visible').fadeOut('slow')
.siblings('img:random').fadeIn('slow') //find a random image
.end().appendTo('#slideshow');},
5500); //5 second interval
});
</script>
</body>
</html> |