Cómo hacer que la imagen de una página web cambie con el tiempo

Escrito por sue smith Google | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer que la imagen de una página web cambie con el tiempo
Make a Web Page Picture Change With Time (Comstock Images/Comstock/Getty Images)

Las páginas web utilizan el código JavaScript para hacer que varias cosas sucedan en intervalos de tiempo determinados. Este es el código del lado del cliente y por lo tanto se lleva a cabo dentro del navegador web, ejecutándose mientras el visitante está viendo e interactuando con tu página. Cambiar imágenes hace que la experiencia de ver una página sea más dinámica y es un efecto que es fácil de implementar y requiere sólo una pequeña cantidad de código JavaScript para funcionar.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Prepara tus imágenes. Asegúrate de que estén recortadas del tamaño adecuado, preferiblemente todas del mismo tamaño para que puedan mostrarse efectivamente en las páginas de tu web sin alterar el otro contenido. Trata de reducir al mínimo el tamaño de los archivos, mantenerlos lo más pequeño posible mientras te aseguras de que todavía sean de buena calidad. Dales a tus imágenes nombres que reflejen alguna secuencia numérica (por ejemplo, "pic1.jpg" y luego "pic2.jpg"), de modo que el único elemento de identificación sea el número.

  2. 2

    Crea tu página web utilizando estructuras HTML. Utiliza el siguiente esquema, cambiando el nombre del archivo de imagen para que se adapte al tuyo: <html> <head> </head> <body> <div><img id="picture" src="pic1.jpg" alt="picture" /></div> </body> </html>. En este caso, las imágenes deben estar en el mismo directorio que la página web. La estructura inicialmente hace que se muestre la primera imagen.

  3. 3

    Agrega código JavaScript para medir el tiempo. Inserta lo siguiente en la sección de la cabecera de tu página: <script type="text/javascript"> var currPic=1; var totPics=3; var keepTime; function setupPicChange() { keepTime=setTimeout("changePic()", 5000); } function changePic() { currPic++; if(currPic>totPics) currPic=1; document.getElementById("picture").src="pic"+currPic+".jpg"; setupPicChange(); } </script>. Cambia el número "totPics" para adaptarlo a la cantidad de imágenes que tengas.

  4. 4

    Configura la página para que inicie el temporizador. Añádele elementos de la siguiente manera: <body onload="setupPicChange();"> Esto hace que el temporizador comience cuando se cargue la página. Después de cinco segundos la imagen se cambiará a la siguiente en la secuencia y el contador empezará a llevar la cuenta de nuevo. El número de secuencia se inicia en 1 y se incrementa cada vez que se acabe el tiempo, de modo que la imagen cambie su atributo de origen a la siguiente en la secuencia. Alternativamente nombra a tus imágenes de la manera que quieras y almacena sus nombres de archivo en una matriz, buscando a través de esto en lugar de utilizar un número de secuencia.

  5. 5

    Escucha la interacción del usuario con tu página. Dependiendo del propósito de ésta, es posible que quieras alterar el modo en que funciona a medida que el usuario interactúe con ella. Por ejemplo, para detener la imagen en vez de que cambie mientras el usuario tiene su mouse sobre ella, agrega lo siguiente a tu código de imagen: <img id="picture" src="pic1.jpg" alt="picture" onmouseover="stopTimer();" onmouseout="startTimer();" /> Add to the JavaScript: function stopTimer() { clearTimeout(keepTime); } function startTimer() { keepTime=setTimeout("changePic()", 5000); }

Consejos y advertencias

  • Haz una búsqueda en Internet de forma gratuita sobre los recursos JavaScript que te permiten crear efectos dinámicos tales como la animación y la transición entre imágenes.
  • JavaScript a veces se comporta de manera muy diferente en determinados navegadores, por lo que vale la pena probar para asegurarte de que tus efectos funcionan para tantos usuarios como sea posible.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles