Fondo variable

[rapuig]

Hola, todo bien?
Quiero que el fondo de mi web varia cada determinado tiempo, he buscado en google y me encontré con una función de jquery que lo hace pero de forma randomica y no se por que razón solo varia entre dos de las imágenes que le asigno.
Por si no queda claro a continuación pongo el código. Que otra solución me recomiendan?
HTML

Código:

	

<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="js/jquery.BgImageTransition.js"></script> 

<script language="JavaScript" type="text/javascript"> 
$( function(){var bgImages = ['fondo.jpg','fondo4.jpg', 'fondo3.jpg'];
var currImage = 'fondo.jpg';
setInterval( function(){
do{
var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
        }while( randImage == currImage )
        currImage = randImage;
        $('#fondo').BgImageTransition( 'img/'+currImage );
    }, 8000)
})
 
</script>

CSS

Código:

#fondo{
	height:470px;
	width:887px;
	background-image:url(img/fondo.jpg);
	background-repeat:no-repeat;
	}

Muchas gracias!

[alexk]

y si preguntas en el foro de JS o PHP? esto solo con CSS no se puede hacer... da click al icono de tu post para pedir que muevan tu cuestion

[rapuig]

Perdon, ya lo hice en ese foro pero no tuve mucho éxito por eso pregunte por aca porque quizás alguien que trabaja con css puede saber o haber tenido una experiencia con esto.

[alexk]

Iniciado por rapuig

Perdon, ya lo hice en ese foro pero no tuve mucho éxito por eso pregunte por aca porque quizás alguien que trabaja con css puede saber o haber tenido una experiencia con esto.

pues lo dudo mucho pero bueno suerte

[vgonga1986]

Aunque no va aquí el post te resuelvo.

El problema lo tienes en estas dos líneas:
var currImage = 'fondo.jpg'
while (randImage == currImage)

Lo que haces es asignar a currImage uno de los fondos que tienes en el array y luego seleccionas aleatoriamente uno de los que tienes en el array hasta que sea diferente currImage, por lo tanto el que pongas en currImage nunca se va a seleccionar.

Espero que te sirva, un saludo.

[rapuig]

Gracias por contestar, cambie carrImage = fondo.jpg por una imagen que no estuviera en el array si era a eso a lo que te referías pero sigue pasando lo mismo.

Hay alguna opción que que lo que haga en vez de elegir de forma randomica lo haga recorriendo el array y listo?

[vgonga1986]

Ya lo entendí, Math.random() te da un número aleatorio entre 0 y 1, tú lo multiplicas por el tamaño del array menos 1 (en este caso 2), luego tendrás un número entre 0 y 2.

Luego lo pasas por Math.ceil(), este método te da el entero inmediatamente superior (la función techo matemática). Por ejemplo, ceil(3)=3 y ceil(3.4)=4. Ves por dónde voy? Tal y como está, el resultado sólo será 1 o 2, ya que si el random te da 0.1, el ceil es 1.

Para solucionarlo, cambia ceil() por round(), de esta forma tendrás un redondeo. De un número entre 0 y 2 obtendrás, 0 cuando esté en [0, 0'5), 1 cuando esté en [0'5, 1'5) y 2 cuando esté en [1'5, 2].

De todas formas, ya que estamos con matemáticas, este método no es realmente randómico, ya que hay más posibilidades de que salga 1 a que salga 0 y 2, concretamente el doble.

Un saludo.

[rapuig]

Ahora si lo entendí, muchas gracias! Pero me surgió otro problema :S siempre pasa por la img de #fondo o sea por la background-image antes de elegir una de las del array, no se si me explico, 5 segundos background-image, 5 segundos alguna img del array, 5 segundos background-image y 5 segundos otra imagen y asi... y esa no era mi idea sino que variaran entre ellas. Obviamente si no pongo background-image lo que hace es 5 segundos nada, 5 segundos una imagen, 5 segundos nada, 5 segundos alguna imagen y asi...

[vgonga1986]

Ahí ya me pillas, no tengo tanta idea de JS, pregunta en el foro correspondiente. Lo otro era más tema de programación y matemáticas, esto es tema de saber cómo funciona JS.

Un saludo, siento no poder ayudarte más.

[rapuig]

No pasa nada, gracias de todos modos! Voy a probar en el otro foro.
Saludos