Comment créer et parcourir un tableau d'images en JavaScript

Pour afficher une séquence d’images dans un navigateur, stockez leurs chemins dans un tableau, conservez la position sélectionnée dans un index et attribuez le chemin sélectionné au src d’un élément image. Les gestionnaires Précédent et Suivant peuvent mettre à jour l’index avec l’arithmétique modulo afin que la navigation se poursuive depuis l’une ou l’autre extrémité d’un tableau non vide. Ce modèle fonctionne avec des éléments image existants ainsi qu’avec des éléments créés par JavaScript.

Utiliser des objets Image pour afficher un tableau d’images en JavaScript

Le constructeur Image du navigateur crée un objet image. Définissez le src de chaque objet sur un chemin d’image local, puis stockez les objets dans l’ordre où vous souhaitez les afficher. La valeur src identifie le fichier image ; l’élément <img> visible peut utiliser le src de l’objet sélectionné comme sa propre source.

Conservez la position sélectionnée dans un index qui commence à 0. Avec images comme tableau, la formule vers l’avant est (index + 1) % images.length, et la formule vers l’arrière est (index - 1 + images.length) % images.length. La première formule passe du dernier élément au premier ; la seconde passe du premier élément au dernier. Les deux formules supposent que le tableau contient au moins une image et que l’index de départ se trouve dans la plage valide.

Initialisez l’élément visible à partir du src du premier objet avant de connecter les contrôles de navigation. Lorsqu’un contrôle est sélectionné, mettez à jour l’index, puis copiez le src de l’objet sélectionné dans l’élément visible. Maintenez les chemins locaux en cohérence avec l’URL de la page et les emplacements des fichiers image.

Utiliser un tableau de chemins d’images pour afficher des images en JavaScript

Un tableau de chaînes est un moyen simple de conserver les chemins des images dans l’ordre d’affichage. L’exemple ci-dessous maintient un index et renvoie le chemin sélectionné par chaque fonction de navigation. C’est un exemple JavaScript autonome ; aucune preuve d’exécution n’a été fournie pour ce brouillon.

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());

Dans une page, placez un élément image à l’intérieur d’un conteneur tel que <div id="content"></div>. Initialisez son src avec images[index] ; une fois que l’une des fonctions de navigation a mis à jour l’index, attribuez la nouvelle valeur de images[index] au src du même élément. Les chemins de l’exemple sont des espaces réservés, remplacez-les donc par des fichiers que votre page peut charger. Le tableau doit contenir au moins un chemin, et l’index initial doit identifier l’une de ses entrées.

Utiliser les méthodes du DOM pour afficher un tableau d’images en JavaScript

JavaScript peut créer l’élément <img> affiché au lieu de l’exiger dans le HTML d’origine. Placez d’abord un conteneur cible dans la page, par exemple <div id="imageContainer"></div>. Récupérez-le ensuite avec document.getElementById("imageContainer"), créez une image avec document.createElement("img"), définissez le src de l’image sur le premier chemin et ajoutez-la avec imageContainer.appendChild(img).

Gardez l’élément créé et l’index actuel à disposition des gestionnaires Précédent et Suivant. Chaque gestionnaire calcule l’index suivant avec les formules de bouclage ci-dessus et met à jour le src du même élément. Cela crée un élément image et le réutilise à mesure que le chemin sélectionné change. Le conteneur doit être présent avant l’initialisation ; placez le script après le conteneur ou initialisez-le dans un gestionnaire DOMContentLoaded. Cette section utilise directement les méthodes du DOM et n’utilise pas d’élément modèle HTML.

Utiliser les fonctionnalités modernes de JavaScript pour afficher un tableau d’images en JavaScript

Les exemples utilisent const pour les liaisons qui ne sont pas réaffectées, let pour l’index changeant et la syntaxe des fonctions fléchées telle que const nextImage = () => { ... }. Celles-ci décrivent la syntaxe utilisée dans les exemples ; aucune affirmation de compatibilité d’exécution n’est faite ici.

Pour une visionneuse bidirectionnelle, initialisez l’index avant de rendre le premier chemin. Une fois que l’élément image cible existe, définissez son src initial à partir du tableau. Donnez aux contrôles Suivant et Précédent des gestionnaires qui mettent à jour l’index avec les formules ci-dessus, puis actualisez le src affiché. Cette approche utilise un tableau et un index pour la navigation ; elle n’utilise pas forEach.

Conclusion

Utilisez un tableau d’objets Image lorsque vous souhaitez créer les objets image à l’avance, ou conservez un tableau de chemins et mettez à jour une image visible à mesure que la sélection change. Les méthodes du DOM sont utiles lorsque JavaScript doit créer l’élément image à l’intérieur d’un conteneur. Quelle que soit l’approche choisie, initialisez l’image affichée, maintenez son index aligné sur le tableau et utilisez des formules de bouclage pour la navigation vers l’avant et vers l’arrière.