Foros del Web » Programando para Internet » Javascript »

Slide de imgs de fondo

Estas en el tema de Slide de imgs de fondo en el foro de Javascript en Foros del Web. Hola amigos, estoy teniendo un problema y JS la verdad no es mi fuerte para nada... les cuento tengo un sitio con un slide de ...
  #1 (permalink)  
Antiguo 14/02/2011, 08:43
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Slide de imgs de fondo

Hola amigos, estoy teniendo un problema y JS la verdad no es mi fuerte para nada...
les cuento tengo un sitio con un slide de imagenes de fondo con un intervalo, esto anda perfecto.

El tema, el cual no puedo resolver, es que cuando carga el sitio el fondo queda sin imagenes, hasta que pasan X segundos de la variable (var speed=10000) y luego arranca el slide. A mayor numero mas es lo que tarda en cargar la primera img.

Mi pregunta es, como puedo modificar este JS para que de movida me traiga una imagen de fondo asi queda hasta que arranca el slide?

El codigo que estoy utilizando es este:
Código Javascript:
Ver original
  1. //Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
  2. //For full source code, 100's more DHTML scripts, and TOS,
  3. //visit http://www.dynamicdrive.com
  4.  
  5. //Specify background images to slide
  6. var bgslides=new Array()
  7. bgslides[0]="images/backgrounds/bgimage_01.jpg"
  8. bgslides[1]="images/backgrounds/bgimage_02.jpg"
  9. //bgslides[2]="images/backgrounds/bgimage_02.jpg"
  10.  
  11. //Specify interval between slide (in miliseconds)
  12. var speed=10000
  13.  
  14. //preload images
  15. var processed=new Array()
  16. for (i=0;i<bgslides.length;i++){
  17. processed[i]=new Image()
  18. processed[i].src=bgslides[i]
  19. }
  20.  
  21. var inc=-1
  22.  
  23. function slideback(){
  24. if (inc<bgslides.length-1)
  25. inc++
  26. else
  27. inc=0
  28. document.body.background=processed[inc].src
  29. }
  30.  
  31. if (document.all||document.getElementById)
  32. window.onload=new Function('setInterval("slideback()",speed)')

Agradeceria cualquier ayuda, mil gracias
Slds
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #2 (permalink)  
Antiguo 14/02/2011, 09:00
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Slide de imgs de fondo

así, de pronto se me ocurre que de inicio tenga cargado como background una imagen, y cuando pasen los 10 segundo cargue el primer elemento del array. pero seguro que esto ya se te ha ocurrido
  #3 (permalink)  
Antiguo 14/02/2011, 09:17
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: Slide de imgs de fondo

Hola:

¿Cómo está Dragón...? ¡Que poco se te ve por estos lares!

¡Qué poco me gustan los scripts de terceros...!"

Solo necesitas poner antes o después del setInterval en la implementación del onload, asignar al background el último elemento del array... (mejor el primero)

window.onload = function{
document.body.background=processed[0].src;
setInterval(slideback, speed);
}

Luego la variable inc (mejor sería otro nombre de variable), la inicializas a 0, y lor último:

function slideback(){
document.body.background=processed[inc++ % bgslides.length].src;
}

Supongo que si no cometí errores escribiendo, te tiene que funcionar (más o menos así los suelo hacer para mi...

Nota... Un tirón de orejas por no usar estilos

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 14/02/2011, 09:33
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Slide de imgs de fondo

caricatos jajajaja mil gracias por responder!!! No estoy utilizando CSS porque es algo que hizo un tercero... :( imaginate yo JS nada!!!!

Te pido mil disculpas, se que tu explicaciòn es excelente, pero la verdad me siento un estupido porque no se donde poner cada cosa que me explicaste!!! perdon......

mira, hice esto:

Código Javascript:
Ver original
  1. //Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
  2. //For full source code, 100's more DHTML scripts, and TOS,
  3. //visit http://www.dynamicdrive.com
  4.  
  5. //Specify background images to slide
  6. var bgslides=new Array()
  7. bgslides[0]="images/backgrounds/bgimage_01.jpg"
  8. bgslides[1]="images/backgrounds/bgimage_02.jpg"
  9. //bgslides[2]="images/backgrounds/bgimage_02.jpg"
  10. //Specify interval between slide (in miliseconds)
  11. var speed=20000
  12.  
  13. //preload images
  14. var processed=new Array()
  15. for (i=0;i<bgslides.length;i++){
  16. processed[i]=new Image()
  17. processed[i].src=bgslides[i]
  18. }
  19.  
  20. var inc=-1
  21.  
  22. function slideback(){
  23. if (inc<bgslides.length-1)
  24. inc++
  25. else
  26. inc=0
  27. document.body.background=processed[inc].src
  28. }
  29.  
  30. if (document.all||document.getElementById)
  31. window.onload=new Function('setInterval("slideback()",speed)')
  32.  
  33. window.onload = function{
  34.     document.body.background=processed[0].src;
  35.     setInterval(slideback, speed);
  36. }

creo que hice cualquier cosa, perdoname se que la idea no es copiar y pegar codigo, sino entender lo que uno esta haciendo para futuros problemas, pero esto es algo que quema mis manos y me gustaria si copiar y pegar

Mil gracias si podes darme una mano mas con esto.
un abrazo!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 14/02/2011, 09:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: Slide de imgs de fondo

Hola:

Bueno, vayamos por partes (como dijo Jack "the striper"), el onload salta cuando ya está cargada la página, y por supuesto, está totalmente asignado el array de las imágenes (no tenemos certeza de que estén las imagenes totalmente cargadas, pero sí sus urls)

El elemento del array con índice 0,es el primero en ser asignado, o sea que debería ser el primero en cargarse (si necesitas saberlo con certeza, deberíamos trabajar algo más), o sea que si ese elemento se asigna al cargarse la página, lo que pueda tardar en mostrarse es un tiempo mínimo.
El resto es como ya tenías, sumarle uno al contador. La variante que puse antes solo evita la comparación... te cuento:

si el array es de 5 elementos, cuando haces inc++ % 5, al llegar a cinco devuelve 0, pero inc sigue incrementándose. O sea por cada múltiplo de 5 devuelve 0 (0, 5, 10, 15...)

De todos modos, el error fué mío por copiar y pegar...

var inc = 0;

function slideback(){
document.body.background=processed[inc++ % processed.length].src
}

window.onload = function() {
document.body.background=processed[0].src;
setInterval(slideback, speed);
}

Fíjate que no puse el juego de paréntesis en la función del onload.

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 14/02/2011, 10:15
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Slide de imgs de fondo

caricatos el que sabe, sabe no hay nada que hacer

un millon de gracias amigazo!
un abrazo grande!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #7 (permalink)  
Antiguo 14/02/2011, 10:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Slide de imgs de fondo

solo lo hace quien quiere escuchar
Cita:
body {background:url('img incio la última del ciclo');}

document.body.style.backgroundImage="url(" + processed[inc].src + ")";
  #8 (permalink)  
Antiguo 15/02/2011, 06:48
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Slide de imgs de fondo

para no herir susceptibilidades, algo muy comun en este foro, quiero agradecer la ayuda incondicional y altamente util de IsaBelM

gracias totales!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho

Etiquetas: fondo, slide
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 17:03.