fondo con javascript

[elmouse19]

Hola.
Perdón la demora. Estuve muy ocupado.

Si puedo pasarte el código, y explicarte. Es muy sencillo en realidad.

Primero, necesitas DESCARGAR ESTA LIBRERIA que corresponde al plugin.

Luego, por supuesto, tienes que descomprimir los archivos y subirlos a tu servidor. Sube todos los archivos en una carpeta del servidor diferenciada. Por ejemplo, yo cree una carpeta de nombre "vegas" en la raiz de public_html, y ahí coloque todos los archivos. Esto servirá para mantener el orden de los archivos, y para que no te falte ninguno a la hora de usar el plugin.

Luego tienes que llamar a la librería con el siguiente código.

Código HTML:

<script src="vegas/jquery.vegas.js"></script> 

Por ultimo, tenes que agregar esto en tu codigo, dentro de las etiquetas head y script.

Código Javascript:

/* Vegas */
    $(function() {
        $.vegas('slideshow', {
            delay:3500,
            backgrounds:[
                { src:'images/backgrounds/bg1.jpg', fade:1000 },
                { src:'images/backgrounds/bg2.jpg', fade:1000 },
                { src:'images/backgrounds/bg3.jpg', fade:1000 }
            ]
            })('overlay', {
                src:'/vegas/overlays/11.png'
            });
    });
 

Reemplazando por supuesto las lineas:
{ src:'images/backgrounds/bg1.jpg', fade:1000 },
{ src:'images/backgrounds/bg2.jpg', fade:1000 },
{ src:'images/backgrounds/bg3.jpg', fade:1000 }
por la url correspondiente a las imagenes que deseas poner de fondo. Una linea por cada imagen.
El ",fade:1000" es el efecto de transición y su duración, expresada en milisegundos; por lo tanto 1000 milisegundos es igual a 1 segundo.

Esta parte del codigo:
})('overlay', {
src:'/vegas/overlays/11.png'
});

Corresponde a la imagen de overlay que quieras usar. Es decir, una imagen semitransparente que sirve de textura para las imágenes de fondo. Esta imagen se pone sobre todas las imágenes que pongas de fondo, y el plugin cuenta con varias opciones de overlay a elegir. Las podrás ver dentro de la carpeta overlays.

Si no quieres ningún overlay simplemente sacas esa parte del código. Ejemplo.
('overlay', {
src:'/vegas/overlays/11.png'
});

Y quedaría asi:

Código Javascript:

/* Vegas */
    $(function() {
        $.vegas('slideshow', {
            delay:3500,
            backgrounds:[
                { src:'images/backgrounds/bg1.jpg', fade:1000 },
                { src:'images/backgrounds/bg2.jpg', fade:1000 },
                { src:'images/backgrounds/bg3.jpg', fade:1000 }
            ]
            })
    });
 

Cualquier duda, pregúntame.
Saludos.