Diaporama JavaScript avec fonctions

• Mai 14, 2024

Dans les articles précédents, nous avons créé et effectué quelques ajustements sur un diaporama JavaScript très simple. Ce diaporama est complètement fonctionnel et affiche même quelque chose d'approprié pour les personnes qui n'ont pas JavaScript, mais j'aimerais que la vignette de l'image que j'affiche actuellement soit différente des autres vignettes. J'avais décidé d'utiliser un identifiant CSS appelé "actuel" qui rendait les images semi-transparentes et ajoutait une fine bordure rouge pour la vignette sélectionnée. Dans mon dernier article, j'avais obtenu ce comportement pour la miniature initialement sélectionnée, mais lorsque j'ai sélectionné une nouvelle miniature, la nouvelle miniature n'a pas changé et la miniature initiale a conservé le style sélectionné.

Dans la version précédente de mon diaporama, lorsqu'un utilisateur clique sur une miniature, les grandes images associées s'affichent. Ce que je veux, c'est changer la grande image, définir la vignette de l'image précédemment sélectionnée pour revenir à la normale et faire afficher cette vignette avec le style spécial pour l'image sélectionnée. Comme je fais maintenant plusieurs choses lorsque la vignette est cliquée, je suis passé de mettre tout mon code dans l'attribut onClick de la img pour utiliser une fonction. Les fonctions JavaScript vont généralement dans le tête section du HTML afin qu'ils soient chargés et prêts lorsque le corps de la page est chargé. Ils peuvent être insérés directement entre scénario balises ou mettre et un fichier et inclus. Pour les programmes courts, ou lorsque je code activement, je trouve plus facile de mettre mon code directement dans la page comme je l'ai fait ici.

J'aurais pu utiliser une fonction pour chaque vignette mais comme tout ce qui change de vignette en vignette est le nom de l'image et l'identifiant de la vignette (et j'ai utilisé le nom de l'image pour l'identifiant), j'ai écrit une seule fonction qui a pris la id comme argument et l'a utilisé pour créer le nom d'image approprié en y ajoutant ".jpg". J'ai appelé ma fonction displayLarge.

fonction displayLarge (id) {
// change la grande image
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// redéfinit le style de la vignette précédente par défaut
document.getElementById ("current"). id = oldID;
// note l'id avant de le changer
oldID = id
// marque la vignette comme courante avec le style courant
document.getElementById (id) .id = "current";
}

Pour que cette fonction fonctionne la première fois, j'ai également dû donner une définition initiale de oldID, la variable que j'utilise pour mémoriser l'ID d'origine de la vignette actuellement sélectionnée. Tout ce code va dans la section d'en-tête de la page Web, afin qu'il soit chargé avant le chargement de la page.

Enfin, j'ai changé le code HTML des vignettes pour appeler ma fonction. Le code HTML de mon diaporama ressemble maintenant à ceci:











Vous pouvez voir un exemple de travail de ce code ici.

Instructions Vidéo: Diaporama automatisé de photos pour le Web en Javascript (Mai 2024).