Cambiar fondo de pagina web cada cierto tiempo

Iniciado por basickdagger, 15 Julio 2011, 02:20 AM

0 Miembros y 1 Visitante están viendo este tema.

basickdagger

hola que tal, eh visto paginas web que su fondo cambia cada cierto tiempo me gustaria saber si alguien sabe como,.. tengo mi css pero creo que eso se hace con javascript si ocupan algo de mi codigo pidanmelo... por lo de "no hacemos la tarea " pero no se que parte de codigo necesiten.

gracias de antemano

dark_sargon

¿Hablas de que el fondo cambie mientras el visitante está online o que el fondo cambie dependiendo de una hora, un día o fecha específica?
http://www.actimediaonline.com
Diseño Web, animación y más.

http://www.ciudadoscura.com
Diseño Web, electrónica, programación, móviles y más.

basickdagger

mientras esta en linea... vi algunos ejemplos y me lo plantean asi pero no funciona..

Código (javascript) [Seleccionar]

var num_img=1;

function cambiar()
{     


javascript:document.body.style.background="img/'+ num_img +'.jpg";


num_img=num_img+1;

if (num_img>7)
{
num_img=1
}
}


setInterval("cambiar()",7000);



donde num_img son el nombre de las imagenes dentro d ela carpeta img y cada imagen tiene un numero empiesa del 1 hasta el 7 y todas con la extension jpg, el 2000 son los milisegundos, osea cada 7 segundos va cambiar la imagen... pero estoy atoradoo no tengo idea  :S


dark_sargon

Bueno, amigo. Hice un script para que veas cómo funciona con colores. Yo lo entiendo como una máquina de estados ;D

Tú ponle imagenes en vez de colores... recuerda precargar laas imagenes antes de ejecutar el script.
<script language="javascript">

   var numero = 0;

   function cambiar()
   {
      if(numero==0){
         document.body.style.backgroundColor="red";
         numero = 1;
      }else if(numero==1){
         document.body.style.backgroundColor="green";
         numero = 2;
      }else if(numero==2){
         document.body.style.backgroundColor="blue";
         numero = 0;
      }
   }

   setInterval("cambiar()",2000);

</script>


Saludos.
http://www.actimediaonline.com
Diseño Web, animación y más.

http://www.ciudadoscura.com
Diseño Web, electrónica, programación, móviles y más.

basickdagger

#4
gracias por la respuesta, eh probado el codigo que mostraste funciona pero al querer cambiarlo por imagenes no funciona

cambio document.body.style.backgroundColor="green";  

lo cambio por

 document.body.style.backgroundImage='url(img/2.jpg)';

y no funciona

y diculpa lode cargar las imagenes antes no se bn a q te refieras o en q momento hago la precarga

basickdagger


darkriz

Perdonad, al final siempre hay maneras de hacerlo, aunque quizá he llegado tarde, aquí les va un código que encontré en foros del web punto com
No lo he implementado, pero dicen que funciona, lo pondré a prueba a ver qué tal...

<!--- codigo --->
add_action('wp_print_styles', function() {

    #Carpeta donde se encuentra los fondos (/wp-content/themes/[...]).
    $directorio = '/images/background/';
   
    #---- No editar  ---------------------------------------------------------

    list($dia, $imagen) = explode(';', urldecode($_COOKIE['background']));

    if ($dia != date('d')) {
       
        $fondos = scandir(get_stylesheet_directory() . $directorio);
        $fondos = array_slice($fondos, 2);
        $imagen = $fondos[array_rand($fondos)];
       
        setcookie('background', date('d') . ';' . $imagen);
   
    }
   
    $path = get_bloginfo('template_directory') . $directorio;   
    echo "<style type='text/css'>body { background: url('$path$imagen') top center no-repeat; }</style>";

});

<!--- /codigo --->

basickdagger

Cita de: darkriz en  4 Junio 2013, 07:52 AM
Perdonad, al final siempre hay maneras de hacerlo, aunque quizá he llegado tarde, aquí les va un código que encontré en foros del web punto com
No lo he implementado, pero dicen que funciona, lo pondré a prueba a ver qué tal...

<!--- codigo --->
add_action('wp_print_styles', function() {

    #Carpeta donde se encuentra los fondos (/wp-content/themes/[...]).
    $directorio = '/images/background/';
   
    #---- No editar  ---------------------------------------------------------

    list($dia, $imagen) = explode(';', urldecode($_COOKIE['background']));

    if ($dia != date('d')) {
       
        $fondos = scandir(get_stylesheet_directory() . $directorio);
        $fondos = array_slice($fondos, 2);
        $imagen = $fondos[array_rand($fondos)];
       
        setcookie('background', date('d') . ';' . $imagen);
   
    }
   
    $path = get_bloginfo('template_directory') . $directorio;   
    echo "<style type='text/css'>body { background: url('$path$imagen') top center no-repeat; }</style>";

});

<!--- /codigo --->



hahaha viejisimo el tema... cuando aun estaba en la escuela hahah eso lo resolví hace tiempo con jquery... y existe un plugin de wordpress donde puedes hacerlo también...