En el presente artículo aprenderás cómo hacer que una imagen se cambie automáticamente cada cierto tiempo en tu página web. Este efecto lo lograremos utilizando JavaScript . Imagina por un momento que tienes una imagen en tu página que quieres que se actualice cada hora para mostrar diferentes promociones o eventos. Con este pequeño tutorial, podrás lograrlo de manera automática y sin complicaciones.
Lo primero que necesitamos es código JavaScript que nos permita cambiar la imagen cada determinado número de horas, ajustar la imagen con CSS, y mostrarla en una etiqueta img.
En este código, primero definimos una lista de imágenes que queremos mostrar y luego creamos una función cambiarImagen que cambia la imagen cada vez que se llama. Luego, utilizamos la función setInterval para llamar a cambiarImagen cada hora (3600000 milisegundos).
De esta manera hemos logrado que nuestra página web muestre una imagen distinta cada hora, de manera automática, puedes aplicar este ejemplo y ajustarlo según tus necesidades, el tiempo de cambio se puede modificar ajustando el valor en milisegundos en setInterval.
Es importante tener en cuenta para el presente ejemplo, ajustar u optimizar el tamaño de las imágenes, mientras menos pesadas sean, más fácil realizarán el cambio automático.
<!DOCTYPE html><html><head> <title>Cambiar imagen automáticamente</title> <style> img { width: 100%; } </style></head><body><img id="imagen" src="imagen1.jpg"><script> var imagenes = ['imagen1.jpg', 'imagen2.jpg', 'imagen3.jpg']; // Lista de imágenes var indice = 0; function cambiarImagen() { document.getElementById('imagen').src = imagenes[indice]; indice = (indice + 1) % imagenes.length; // Avanzamos al siguiente índice } setInterval(cambiarImagen, 3600000); // Cambiar cada hora (3600000 milisegundos)</script></body></html>