Comment créer un diaporama JavaScript en 3 étapes faciles

Si vous avez lu notre guide sur la création d'un site Web, vous vous demandez peut-être quoi faire ensuite pour améliorer vos compétences. Faire un diaporama de photos est une tâche étonnamment facile, et qui peut vous apprendre des compétences précieuses nécessaires pour obtenir un travail de programmation.

Aujourd'hui, je vais vous montrer comment créer un diaporama JavaScript à partir de zéro. Allons-y !

Prérequis

Vous aurez besoin de connaître certaines choses avant de pouvoir commencer à coder. En plus d'un navigateur Web approprié et d'un éditeur de texte de votre choix (je recommande Sublime Text), vous aurez besoin d'une certaine expérience avec HTML , CSS , JavaScript , et jQuery .

Si vous n'êtes pas si confiant dans vos compétences, assurez-vous de lire notre guide d'utilisation du modèle d'objet de document et ces conseils pour apprendre le CSS. Si vous êtes à l'aise avec JavaScript mais que vous n'avez jamais utilisé jQuery auparavant, consultez notre guide de base sur jQuery.

1. Premiers pas

Ce diaporama nécessite plusieurs fonctionnalités :

1. Prise en charge des images
2. Commandes pour changer les images
3. Une légende de texte
4. Mode automatique

Il semble une simple liste de fonctionnalités. Le mode automatique fera automatiquement avancer les images à la suivante dans la séquence. Voici le croquis que j'ai fait avant d'écrire du code :

Si vous vous demandez pourquoi planifier, jetez un coup d'œil à ces pires erreurs de programmation de l'histoire. Ce projet ne tuera personne, mais il est essentiel d'avoir une solide compréhension du code et des procédures de planification avant de travailler sur un code plus volumineux, même s'il ne s'agit que d'une ébauche.

Voici le code HTML initial dont vous avez besoin pour commencer. Enregistrez-le dans un fichier avec un nom approprié, tel que index.html :

 
  
  
  
  
  
  
 
  
  
  
 
 
 
 
  
 
 
 Moulin à vent 
 
 
 
 
 
 
  
 
 
 Plante 
 
 
 
 
 
 
  
 
 
 Chien 
 
 
 
 
 
❮
 
 
❯ ;
 
 
 
  
  

Voici à quoi ressemble le code :

C'est un peu nul non ? Décomposons-le avant de l'améliorer.

Ce code contient du HTML "standard" , tête , style , script , et corps Mots clés. Ces parties sont des composants essentiels de tout site Web. JQuery est inclus via le CDN de Google -- rien d'unique ou de spécial jusqu'à présent.

À l'intérieur du corps se trouve une div avec un identifiant de showContainer . Il s'agit d'un emballage ou d'un conteneur extérieur pour stocker le diaporama. Vous améliorerez cela plus tard avec CSS. À l'intérieur de ce conteneur, il y a trois blocs de code, chacun ayant un objectif similaire.

Une classe parent est définie avec un nom de classe de imageContainer :

Ceci est utilisé pour stocker une seule diapositive -- une image et une légende sont stockées dans ce conteneur. Chaque conteneur a un identifiant unique, composé des caractères im_ et un nombre. Chaque conteneur a un numéro différent, de un à trois.

Dans une dernière étape, une image est référencée et la légende est stockée dans un div avec la légende classe :

 
 
 
 Chien 
 
 

J'ai créé mes images avec des noms de fichiers numériques et je les ai stockées dans un dossier appelé Images . Vous pouvez appeler le vôtre comme bon vous semble, à condition de mettre à jour le code HTML en conséquence.

Si vous souhaitez avoir plus ou moins d'images dans votre diaporama, copiez et collez ou supprimez simplement les blocs de code avec le imageContainer class, en n'oubliant pas de mettre à jour les noms de fichiers et les identifiants si nécessaire.

Enfin, les boutons de navigation sont créés. Celles-ci permettent à l'utilisateur de naviguer dans les images :

❮ ;
 
 
❯ ;
 

Ces entités HTML les codes sont utilisés pour afficher les flèches vers l'avant et vers l'arrière, d'une manière similaire au fonctionnement des polices d'icônes.

2. Le CSS

Maintenant que la structure de base est en place, il est temps de la rendre jolie . Voici à quoi cela ressemblera après ce nouveau code :

Ajoutez ce CSS entre votre style balises :

html { 
 famille de polices :helvetica, arial ; 
 } 
 #showContainer { 
 /* Wrapper principal pour toutes les images */ 
 largeur :670 pixels ; 
 rembourrage :0 ; 
 marge :0 automatique; 
 débordement caché; 
 position :relative ; 
 } 
 .navButton { 
 /* Rendre les boutons jolis */ 
 curseur :pointeur; 
 flotteur :gauche ; 
 largeur :25px ; 
 hauteur :22px ; 
 rembourrage :10px ; 
 marge droite :5 px ; 
 débordement caché; 
 aligner le texte :centrer ; 
 Couleur blanche; 
 font-weight :gras ; 
 taille de police :18 px ; 
 arrière-plan :#000000 ; 
 opacité :0,65; 
 sélection de l'utilisateur :aucune ; 
 } 
 .navButton :survolez { 
 opacité :1; 
 } 
 .légende { 
 Flotter à droite; 
 } 
 .imageContainer:not(:first-child) { 
 /* Masque toutes les images sauf la première */ 
 affichage :aucun; 
 } 

Ça a l'air beaucoup mieux maintenant, non ? Jetons un coup d'œil au code.

J'utilise des exemples d'images qui font tous 670 x 503 pixels , ce diaporama a donc été principalement conçu autour d'images de cette taille. Vous devrez ajuster le CSS de manière appropriée si vous souhaitez utiliser des images d'une taille différente. Je vous recommande de redimensionner vos images aux tailles correspondantes - différentes images de différentes dimensions causeront des problèmes de style.

La plupart de ce CSS est explicite. Il y a du code pour définir la taille du conteneur pour stocker les images, tout aligner au centre, spécifier la police, ainsi que la couleur du bouton et du texte. Il y a quelques styles que vous n'avez peut-être jamais rencontrés :

1. curseur :pointeur -- Cela change le curseur d'une flèche à un doigt pointé lorsque vous déplacez votre curseur sur les boutons.
2. opacité :0,65 -- Cela augmente la transparence des boutons.
3. sélection de l'utilisateur :aucun -- Cela garantit que vous ne pouvez pas mettre en surbrillance accidentellement le texte sur les boutons.

Vous pouvez voir le résultat de la plupart de ce code dans les boutons :

La partie la plus complexe ici est cette ligne étrange :

.imageContainer:not(:first-child) {/code> 

Cela peut sembler assez inhabituel, mais c'est assez explicite.

Tout d'abord, il cible tous les éléments avec le imageContainer classer. Le  :pas() la syntaxe indique que tous les éléments à l'intérieur des crochets doivent être exclus de ce style. Enfin, le :first-child la syntaxe indique que ce CSS doit cibler tout élément correspondant au nom mais ignorer le premier élément. La raison en est simple. Comme il s'agit d'un diaporama, une seule image à la fois est requise. Ce CSS cache toutes les images sauf la première.

3. Le JavaScript

La dernière pièce du puzzle est le JavaScript. C'est la logique pour que le diaporama fonctionne correctement.

Ajoutez ce code à votre script balise :

$(document).ready(function() { 
 $('#précédent').on('clic', fonction(){ 
 // Passe à l'image précédente 
 $('#im_' + imageactuelle).stop().fadeOut(1); 
 diminuerImage(); 
 $('#im_' + imageactuelle).stop().fadeIn(1); 
 }); 
 $('#suivant').on('clic', fonction(){ 
 // Passe à l'image suivante 
 $('#im_' + imageactuelle).stop().fadeOut(1); 
 augmenterImage(); 
 $('#im_' + imageactuelle).stop().fadeIn(1); 
 }); 
 var imageactuelle =1 ; 
 var imagestotales =3 ; 
 fonction augmenterImage() { 
 /* Augmente l'image actuelle de 1. 
 * Réinitialise à 1 si supérieur à totalImages 
 */ 
 ++imageactuelle ; 
 if(imageactuelle> imagestotales) { 
 ImageCourante =1 ; 
 } 
 } 
 fonction diminuerImage() { 
 /* Diminue currentImage de 1. 
 * Réinitialise à totalImages si inférieur à 1 
 */ 
 --Image actuelle; 
 si(imagecourante <1) { 
 imageactuelle =totalImages ; 
 } 
 } 
 }); 

Cela peut sembler contre-intuitif, mais je vais ignorer les blocs de code initiaux et passer directement à l'explication du code à mi-parcours - ne vous inquiétez pas, j'explique tout le code !

Vous devez définir deux variables. (Voici comment définir des variables en JavaScript.) Ces variables peuvent être considérées comme les principales variables de configuration du diaporama :

var imageactuelle =1 ; 
 var totalImages =3; 

Ceux-ci stockent le nombre total d'images dans le diaporama et le numéro de l'image à partir de laquelle commencer. Si vous avez plus d'images, changez simplement le totalImages variable au nombre total d'images que vous avez.

Les deux fonctions increaseImage et diminuezImage avancer ou reculer le currentImage variable. Cette variable doit-elle être inférieure à un ou supérieure à totalImages , il est réinitialisé à un ou totalImages . Cela garantit que le diaporama se bouclera une fois arrivé à la fin.

Revenons au code du début. Ce code "cible" les boutons suivant et précédent. Lorsque vous cliquez sur chaque bouton, il appelle l'augmentation appropriée ou diminuer méthodes. Une fois terminé, il suffit de faire disparaître l'image à l'écran et de faire apparaître la nouvelle image (telle que définie par currentImage variable).

Le stop() La méthode est intégrée à jQuery. Cela annule tous les événements en attente. Cela garantit que chaque pression sur un bouton est fluide et signifie que vous n'avez pas 100 pressions sur les boutons en attente d'exécution si vous devenez un peu fou sur la souris. Le fadeIn(1) et fondu sortant(1) les méthodes font apparaître ou disparaître les images selon les besoins. Le nombre spécifie la durée du fondu en millisecondes. Essayez de le remplacer par un nombre plus grand, tel que 500. Un nombre plus grand entraîne un temps de transition plus long. Allez trop loin, cependant, et vous pourriez commencer à voir des événements étranges ou des "scintillements" entre les changements d'image. Voici le diaporama en action :

Avancement automatique

Ce diaporama a l'air plutôt bien maintenant, mais il reste une dernière touche finale à apporter. L'avancement automatique est une fonctionnalité qui fera vraiment briller ce diaporama. Après une période de temps définie, chaque image passera automatiquement à la suivante. Cependant, l'utilisateur peut toujours naviguer vers l'avant ou vers l'arrière.

C'est un travail facile avec jQuery. Un minuteur doit être créé pour exécuter votre code tous les X secondes. Plutôt que d'écrire un nouveau code, cependant, la chose la plus simple à faire est d'émuler un "clic" sur le bouton d'image suivant et de laisser le code existant faire tout le travail.

Voici le nouveau code JavaScript dont vous avez besoin -- ajoutez-le après le decreaseImage fonction :

window.setInterval(fonction() { 
 $('#précédent').click(); 
 }, 2500); 

Il ne se passe pas grand chose ici. Le window.setInterval La méthode exécutera un morceau de code régulièrement, tel que défini par le temps spécifié à la fin. Le temps 2500 (en millisecondes) signifie que ce diaporama avancera toutes les 2,5 secondes. Un nombre plus petit signifie que chaque image avancera à un rythme plus rapide. Le clic La méthode déclenche les boutons pour exécuter le code comme si un utilisateur avait cliqué sur le bouton avec sa souris.

Si vous êtes prêt pour votre prochain défi JavaScript, essayez de créer un site Web avec un constructeur de site Web statique tel que GatsbyJS ou un framework frontal tel que Vue. Si vous apprenez Ruby, Jekyll est également une option. Voici comment Jekyll et GatsbyJS se comparent.

Crédit image :Tharanat Sardsri via Shutterstock.com

[]