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

Si vous avez lu notre guide sur Comment faire 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 droit au but !

Conditions préalables

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

Si vous n'êtes pas aussi confiant dans vos compétences, assurez-vous de lire notre guide d'utilisation du modèle objet de document et ces conseils pour apprendre 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. Pour commencer

Ce diaporama nécessite plusieurs fonctionnalités :

Prise en charge des images
Commandes pour changer les images
Une légende de texte
Mode automatique

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

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

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

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Voici à quoi ressemble le code :

C'est un peu foutu n'est-ce pas ? Décomposons-le avant de l'améliorer.

Ce code contient 'standard' HTML , diriger , style , scénario , 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 un 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 parente est définie avec un nom de classe de imageConteneur :

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

Comme étape finale, une image est référencée et la légende est stockée dans un div avec le légende classer:

Dog

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 vous le souhaitez, à condition de mettre à jour le code HTML pour qu'il corresponde.

Si vous souhaitez avoir plus ou moins d'images dans votre diaporama, il suffit de copier-coller ou de supprimer les blocs de code avec le imageConteneur 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. Ceux-ci permettent à l'utilisateur de naviguer à travers les images :

 ❮  
 ❯

Ces Entité 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 lui donner l'air joli . Voici à quoi cela ressemblera après ce nouveau code :

Ajoutez ce CSS entre votre style Mots clés:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

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

J'utilise des exemples d'images qui sont toutes 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 entraîneront des problèmes de style.

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

curseur : pointeur -- Cela change le curseur d'une flèche à un doigt pointé lorsque vous déplacez votre curseur sur les boutons.
opacité : 0,65 -- Cela augmente la transparence des boutons.
sélection par l'utilisateur : aucun -- Cela garantit que vous ne pouvez pas mettre accidentellement en surbrillance 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) {

Cela peut sembler assez inhabituel, mais il est assez explicite.

Premièrement, il cible tous les éléments ayant le imageConteneur classer. Les :ne pas() la syntaxe indique que tous les éléments à l'intérieur des crochets doivent être exclu de ce style. Finalement, le :premier enfant 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 à l'exception de 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 scénario étiqueter:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Cela peut sembler contre-intuitif, mais je vais sauter les blocs de code initiaux et passer directement à l'explication du code à mi-chemin - 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 currentImage = 1;  
var totalImages = 3;

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

Les deux fonctions augmenterImage et diminuerImage avancer ou reculer le Image actuelle variable. Cette variable devrait-elle être inférieure à un, ou supérieure à totalImages , il est réinitialisé à un ou totalImages . Cela garantit que le diaporama bouclera une fois qu'il aura atteint la fin.

Retour au code du début. Ce code 'cible' les boutons suivant et précédent. Lorsque vous cliquez sur chaque bouton, il appelle le augmenter ou diminuer méthodes. Une fois terminé, il efface simplement l'image à l'écran et s'estompe dans la nouvelle image (comme défini par le Image actuelle variable).

Les arrêter() 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 de boutons en attente d'exécution si vous devenez un peu fou avec la souris. Les fondu (1) et fondu sortant(1) 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 élevé entraîne un temps de transition plus long. Allez trop loin, cependant, et vous pouvez 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.

Windows 10 ne se connecte pas au wifi

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

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

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Il ne se passe pas grand-chose ici. Les window.setInterval La méthode exécutera régulièrement un morceau de code, 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 plus rapidement. Les Cliquez sur 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 comme GatsbyJS ou un framework frontal comme Vue . Si vous êtes un apprenant Ruby, Jekyll est également une option. Voici comment Jekyll et GatsbyJS se comparent.

Crédit d'image: Tharanat Sardsri via Shutterstock.com

Partager Partager Tweeter E-mail Les 8 meilleurs sites Web pour télécharger des livres audio gratuitement

Les livres audio sont une excellente source de divertissement et beaucoup plus faciles à digérer. Voici les huit meilleurs sites Web où vous pouvez les télécharger gratuitement.

Lire la suite Rubriques connexes

La programmation
JavaScript
Création de sites web

A propos de l'auteur Joe Coburn(136 articles publiés)

Joe est diplômé en informatique de l'Université de Lincoln, au Royaume-Uni. C'est un développeur de logiciels professionnel, et lorsqu'il ne pilote pas de drones ou n'écrit pas de musique, on le trouve souvent en train de prendre des photos ou de produire des vidéos.

Plus de Joe Coburn

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner