Tema: background
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 13/09/2011, 11:21
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: background
si, se puede mejorar

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Cambiar background cada n segundos</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. /* definimos como background por defecto la primera imagen de nuestra lista */
  10. body {
  11. background-image: url('sfondo01.jpg');
  12. }
  13. /* esta div no es visible, pero precarga la imagen siguiente a cargar por body, asi se evita algún posible parpadeo
  14. definimos como background por defecto la 2ª imagen de nuestra lista.
  15. Para la demo le damos un alto y ancho, pero debe establecerse a 0;
  16. */
  17. div#precarga{
  18. width: 100px;
  19. height: 100px;
  20. margin: 0px;
  21. padding: 0px;
  22. background-image: url('sfondo02.gif');
  23. }
  24. h1{
  25. color: #0061C1;
  26. }
  27. /*]]>*/
  28. </style>
  29. <script type="text/javascript">
  30. //<![CDATA[
  31. // aqui definis la lista de imágenes para el cambio automático
  32. var fondos = ['sfondo01.jpg', 'sfondo02.gif', 'sfondo03.jpg', 'sfondo04.jpg', 'sfondo05.jpg', 'sfondo06.jpg', 'sfondo07.jpg'];
  33. var fondo_actual = 0;
  34. // aqui hacemos la rotación
  35. var CambiarFondo = function(){
  36. if (fondo_actual == fondos.length) {
  37. fondo_actual = 0;
  38. }
  39. var precargar =fondo_actual++;
  40. var precargar2 = precargar+2;
  41. // cambiamos el background del body
  42. document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
  43. // cargamos en el div no visible "#precarga" la imagen siguiente que se cargará en el body
  44. // para ya tenerla en la cache, comenzamos con la imagen 3, ya que la 1 y 2 las tenemos en el css
  45. document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
  46. }
  47. //aqui definís el tiempo en milisegundos e  inicias la función con setInterval para que se repita indefinidamente
  48. window.setInterval(CambiarFondo, 10000); 
  49. //]]>
  50. </script>
  51. </head>
  52. <body>
  53. <div id="precarga"><!-- precarga de backgrounds --></div>
  54. <h1>Cambiar background cada n segundos</h1>
  55. </body>
  56. </html>

demo
http://foros.emprear.com/jsdemo/rota...torotarbg.html

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.