Cómo crear e iterar un array de imágenes en JavaScript

Para mostrar una secuencia de imágenes en un navegador, almacena sus rutas en un array, mantén la posición seleccionada en un índice y asigna la ruta seleccionada al src de un elemento de imagen. Los controladores Anterior y Siguiente pueden actualizar el índice con aritmética modular para que la navegación continúe desde cualquiera de los extremos de un array no vacío. Este patrón funciona tanto con elementos de imagen existentes como con elementos creados por JavaScript.

Usar objetos Image para mostrar un array de imágenes en JavaScript

El constructor Image del navegador crea un objeto de imagen. Establece el src de cada objeto en una ruta de imagen local y luego almacena los objetos en el orden en que quieres mostrarlos. El valor src identifica el archivo de imagen; el elemento <img> visible puede usar el src del objeto seleccionado como su propia fuente.

Mantén la posición seleccionada en un índice que comienza en 0. Con images como array, la fórmula hacia adelante es (index + 1) % images.length, y la fórmula hacia atrás es (index - 1 + images.length) % images.length. La primera fórmula pasa del último elemento al primero; la segunda pasa del primero al último. Ambas fórmulas suponen que el array contiene al menos una imagen y que el índice inicial está dentro del rango.

Inicializa el elemento visible a partir del src del primer objeto antes de conectar los controles de navegación. Cuando se selecciona un control, actualiza el índice y luego copia el src del objeto seleccionado en el elemento visible. Mantén las rutas locales coherentes con la URL de la página y las ubicaciones de los archivos de imagen.

Usar un array de rutas de imágenes para mostrar imágenes en JavaScript

Un array de cadenas es una forma sencilla de mantener las rutas de las imágenes en orden de visualización. El siguiente ejemplo mantiene un índice y devuelve la ruta seleccionada por cada función de navegación. Es un ejemplo de JavaScript independiente; no se proporcionó evidencia de ejecución para este borrador.

const images = [
  "./images/classroom.jpg",
  "./images/animals.jpg",
  "./images/nature.jpg"
];
let index = 0;

const nextImage = () => {
  index = (index + 1) % images.length;
  return images[index];
};

const previousImage = () => {
  index = (index - 1 + images.length) % images.length;
  return images[index];
};

console.log(nextImage());
console.log(previousImage());

En una página, coloca un elemento de imagen dentro de un contenedor como <div id="content"></div>. Inicializa su src con images[index]; después de que cualquiera de las funciones de navegación actualice el índice, asigna el nuevo valor de images[index] al src del mismo elemento. Las rutas del ejemplo son marcadores de posición, así que sustitúyelas por archivos que tu página pueda cargar. El array debe contener al menos una ruta, y el índice inicial debe identificar una de sus entradas.

Usar métodos del DOM para mostrar un array de imágenes en JavaScript

JavaScript puede crear el elemento <img> mostrado en lugar de requerirlo en el HTML original. Primero coloca un contenedor de destino en la página, por ejemplo <div id="imageContainer"></div>. Luego obténlo con document.getElementById("imageContainer"), crea una imagen con document.createElement("img"), establece el src de la imagen en la primera ruta y añádela con imageContainer.appendChild(img).

Mantén el elemento creado y el índice actual disponibles para los controladores Anterior y Siguiente. Cada controlador calcula el siguiente índice con las fórmulas de envoltura anteriores y actualiza el src del mismo elemento. Esto crea un elemento de imagen y lo reutiliza a medida que cambia la ruta seleccionada. El contenedor debe estar presente antes de la inicialización; coloca el script después del contenedor o inicialízalo en un controlador DOMContentLoaded. Esta sección utiliza métodos del DOM directamente y no usa un elemento de plantilla HTML.

Usar características modernas de JavaScript para mostrar un array de imágenes en JavaScript

Los ejemplos usan const para los enlaces que no se reasignan, let para el índice cambiante y sintaxis de funciones flecha como const nextImage = () => { ... }. Estos describen la sintaxis utilizada en los ejemplos; aquí no se hace ninguna afirmación sobre compatibilidad en tiempo de ejecución.

Para un visor bidireccional, inicializa el índice antes de renderizar la primera ruta. Una vez que exista el elemento de imagen de destino, establece su src inicial desde el array. Asigna a los controles Siguiente y Anterior controladores que actualicen el índice con las fórmulas anteriores y luego actualicen el src mostrado. Este enfoque utiliza un array y un índice para la navegación; no utiliza forEach.

Conclusión

Usa un array de objetos Image cuando quieras crear los objetos de imagen por adelantado, o mantén un array de rutas y actualiza una imagen visible a medida que cambia la selección. Los métodos del DOM son útiles cuando JavaScript debe crear el elemento de imagen dentro de un contenedor. Sea cual sea el enfoque que elijas, inicializa la imagen mostrada, mantén su índice alineado con el array y usa fórmulas de envoltura para la navegación hacia adelante y hacia atrás.