Diaporama JavaScript avec CSS

• Mai 13, 2024

Dans un article précédent, nous avons créé 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 il n'a pas tout à fait toutes les fonctionnalités que j'aimerais avoir pour mon site Web. En particulier, j'aimerais que la vignette de l'image que j'affiche actuellement soit en quelque sorte différente des autres vignettes. Étant donné que les styles sont un bon moyen d'y parvenir, je vais commencer par convertir tous les attributs de mon HTML existant en CSS.

J'ai d'abord converti mon style existant pour utiliser CSS. Si vous n'êtes pas familier avec CSS, le moyen le plus simple de commencer à l'expérimenter est de le mettre entre style balises dans la tête de votre document HTML. La balise initiale a besoin d'un attribut type pour indiquer au navigateur le type d'informations de style que vous utilisez, elle devrait donc ressembler à ceci:



La conversion initiale en CSS a été facile car seule la grande image avait des informations de style et elle avait déjà un id attribut utilisé à des fins JavaScript.

#largeImage {
bordure: 2px noir uni;
largeur: 544px;
hauteur: 408px;
}

Je n'avais pas auparavant inclus d'informations de dimensionnement pour les miniatures, mais j'ai ajouté une classe appelée les pouces et définissez les balises d'image dans cette classe pour définir la taille à 40 px par 40 px. Cela signifie que même si je charge accidentellement des images trop grandes ou trop petites pour les miniatures, elles seront forcées de s'afficher en taille miniature.

img.thumbs {
frontière: aucune;
largeur: 40px;
hauteur: 40px;
}

J'ai également ajouté un diaporama classe pour tenir l'ensemble du diaporama. Cela me permettra de faire des choses comme ajouter une bordure ou changer la couleur d'arrière-plan pour tout le diaporama si je le souhaite. À ce stade, je ne l'utilise que pour définir la hauteur maximale à la hauteur de la grande image, car lorsque j'ajoute plus de vignettes, je veux qu'elles restent sur le côté de la grande image au lieu de se déplacer au-dessus. Malheureusement, Internet Explorer ne prend pas en charge l'attribut max-height, je devrai donc travailler sur ce problème plus tard.

.slideshow {
hauteur: 408px;
hauteur max: 408px;
}

Enfin, j'ai créé un style pour la vignette sélectionnée. J'ai décidé que je voulais que ma vignette sélectionnée soit semi-transparente et ait une bordure rouge étroite. Puisqu'une seule image sera sélectionnée à la fois, j'ai décidé d'utiliser un identifiant appelé "courant" à cet effet. L'avantage d'utiliser CSS est que je peux changer l'apparence à tout moment sans changer le code. Le style ressemble à ceci:

img # current {
bordure: 1px rouge uni;
filtre: alpha (opacité = 50);
-moz-opacité: 0,5;
opacité: 0,5;
}

Ici, nous voyons du code pour gérer à nouveau les différences de navigateur, les appels standard pour utiliser un élément d'opacité, mais les navigateurs basés sur IE et Mozilla ne le prennent pas encore en charge.

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









Nous n'avons pas changé notre JavaScript, donc le diaporama fonctionne toujours, mais maintenant nous avons plus de style et notre présentation est séparée de notre HTML et JavaScript. Cependant, nous avons un problème, alors que la vignette initialement sélectionnée est semi-transparente avec une bordure rouge, elle le reste lorsque nous changeons d'images. Pour résoudre ce problème, nous devons revenir à notre vieil ami JavaScript.

Vous pouvez voir un exemple fonctionnel du code jusqu'à présent ici.

Instructions Vidéo: How to create slideshow/carousel using HTML, CSS and JavaScript | Part-01/05 (Mai 2024).