Cómo hacer que la imagen de una página web cambie con el tiempo (En 5 Pasos)
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.
Paso 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.
Paso 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:
Paso 3
Agrega código JavaScript para medir el tiempo. Inserta lo siguiente en la sección de la cabecera de tu página: . Cambia el número "totPics" para adaptarlo a la cantidad de imágenes que tengas.
Paso 4
Configura la página para que inicie el temporizador. Añádele elementos de la siguiente manera:
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.Paso 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: Add to the JavaScript: function stopTimer() { clearTimeout(keepTime); } function startTimer() { keepTime=setTimeout("changePic()", 5000); }
