Foros del Web » Creando para Internet » CSS »

Fondo variable

Estas en el tema de Fondo variable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/07/2011, 19:18
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 9 meses
Puntos: 13
Fondo variable

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!
  #2 (permalink)  
Antiguo 12/07/2011, 19:39
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 7 años, 8 meses
Puntos: 137
Respuesta: Fondo variable

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
  #3 (permalink)  
Antiguo 12/07/2011, 20:03
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 9 meses
Puntos: 13
Respuesta: Fondo variable

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.
  #4 (permalink)  
Antiguo 12/07/2011, 20:10
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 7 años, 8 meses
Puntos: 137
Respuesta: Fondo variable

Cita:
Iniciado por rapuig Ver Mensaje
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
  #5 (permalink)  
Antiguo 13/07/2011, 04:13
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: Fondo variable

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.
  #6 (permalink)  
Antiguo 13/07/2011, 23:09
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 9 meses
Puntos: 13
Respuesta: Fondo variable

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?
  #7 (permalink)  
Antiguo 14/07/2011, 02:18
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: Fondo variable

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.
  #8 (permalink)  
Antiguo 14/07/2011, 12:06
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 9 meses
Puntos: 13
Respuesta: Fondo variable

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...
  #9 (permalink)  
Antiguo 15/07/2011, 01:19
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años
Puntos: 252
Respuesta: Fondo variable

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.
  #10 (permalink)  
Antiguo 15/07/2011, 10:56
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 9 meses
Puntos: 13
Respuesta: Fondo variable

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

Etiquetas: fondo, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:37.