Comment créer un curseur d'image à l'aide de JavaScript

Un Diapositive d'imager qui comprend plusieurs images affichées sur une application Web est appelée «Diaporama" et "Carrousels". Il vous permet d'afficher plusieurs images, vidéos ou graphiques sur une application Web. De plus, l'ajout d'un curseur d'image à un site Web peut fasciner les utilisateurs et capter leur attention.

Étant un développeur JavaScript, si vous êtes invité à créer un curseur d'image pour une application Web, vous réfléchira rapidement à l'utilisation de «plugins jQuery». Ces plugins sont utiles; Cependant, ils peuvent rencontrer des conflits de code avec les bibliothèques existantes et les bibliothèques jQuery. Alors, que faire dans ce scénario? Au lieu d'utiliser jQuery, utilisez JavaScript et créez un curseur d'image sans tracas.

Cet article enseignera la procédure de création un curseur d'image en javascript. Alors, commençons!

Comment créer un curseur d'image à l'aide de JavaScript

Pour créer un curseur d'image à l'aide de JavaScript, vous devez suivre les instructions ci-dessous:

Étape 1: Téléchargement souhaité images au dossier du projet.
Étape 2: Ajouter requis Éléments HTML au "indice.html" déposer.
Étape 3: Définir logique Dans le fichier javascript.
Étape 4: Met le style de l'élément HTML ajouté dans le "style.CSS" déposer.

Selon les étapes mentionnées, nous allons maintenant passer par la procédure de création d'un curseur d'image à l'aide de JavaScript.

Note: À des fins de démonstration, nous utilisons le code Visual Studio. Cependant, vous pouvez utiliser n'importe quel éditeur de code de votre choix.

Étape 1: Téléchargez les images souhaitées dans le projet

Dans votre projet, créez un nouveau dossier nommé «images"Et ajoutez-y les images souhaitées pour lesquelles vous souhaitez créer un curseur d'image.

Par exemple, dans notre «Curseur d'image»Folder de projet, nous avons créé un«images«Dossier puis y a ajouté trois images:«img1.jpg","img2.jpg", et "img3.jpg»:

Étape 2: Ajouter les éléments HTML requis à «l'index.fichier html ”

Dans le "indice.html"Fichier, nous ajouterons un conteneur"Images-Slideshow" en utilisant le "" étiqueter. Ce conteneur est encore divisé en trois sections de diapositives d'image.

En plus des diapositives d'images spécifiées, nous ajouterons également deux symboles HTML à l'aide du "”Tag d'ancrage. Le "<"Le symbole nous amènera au"précédent"Slide, tandis que le deuxième symbole">"Glisse le"suivant" image:

❮
❯

Voici comment notre «indice.html»Le fichier ressemble:

Étape 3: Définissez la logique dans le fichier javascript

Nous devons définir la logique dans le «projet.js»Fichier de telle manière que lorsque le curseur d'image est chargé pour la première fois, il montre la première image du curseur. Après cela, il nous permet de nous déplacer entre les diapositives en utilisant les symboles HTML suivants et précédents.

Pour ce faire, premièrement, nous allons définir "1«Comme le«CurrentIndex«Des diapositives et la transmettre au«DisplaySlides ()" fonction:

var currentIndex = 1;
DisplaySlides (CurrentIndex);

Le "DisplaySlides ()«La fonction accepte le«CurrentIndex"Valeur comme argument"nobs". Dans la première étape, cette fonction récupère tous les éléments avec le nom de la classe "glissières d'images".

Ensuite, nous ajouterons un "si" condition "num> diapositives.longueur«Cela vérifie si la valeur du«nobs"L'argument est supérieur à la longueur des diapositives"3". Notez que le «nobs«La valeur fait référence au«CurrentIndex«Des diapositives. Dans le cas, si la condition spécifiée évalue comme «vraie", le "CurrentIndex«Du curseur sera réglé sur«1". Cette condition sera appliquée dans la situation où la dernière image (diapositive 3) s'affiche et l'utilisateur clique sur «suivant" bouton. Ce faisant, le curseur définira le «d'abord”Image (diapositive 1) sur le diaporama.

De même, le second «si" condition "nobs < 1 «Sera évalué comme vrai, lorsque la première image (diapositive 1) s'affiche sur le diaporama et que l'utilisateur clique sur«précédent" bouton. Dans ce cas, la valeur du «CurrentIndex"Est défini comme"3"Ce qui est égal au curseur"longueur»Et la dernière image (diapositive 3) sera affichée sur le diaporama.

De plus, lorsqu'une diapositive est sélectionnée pour afficher en utilisant son «CurrentIndex», L'affichage du style des deux autres diapositives sera défini sur«aucun»:

Fonction affiche des clinides (num)
var x;
var diapositives = document.getElementsByClassName ("ImagesLides");
if (num> diapositives.longueur) currentIndex = 1
si (num < 1) currentIndex = slides.length
pour (x = 0; x < slides.length; x++)
Diapositives [x].style.affiche = "aucun";

Diapositives [CurrentIndex - 1].style.display = "block";

Sur le curseur d'image, lorsque nous cliquons sur le (suivant) ">"Symbole html,"1"Est passé comme un argument au"setslides ()”Fonction qui signifie que le curseur doit passer à la diapositive suivante. À cette fin, le «setslides ()"Appelle"DisplaySlides ()"Fonction en passant"currentIndex + = num"Comme argument. Cette opération augmentera «1" dans le "CurrentIndex”Valeur puis afficher cette image spécifique sur le diaporama.

Dans l'autre cas, quand (précédent) "<"Le symbole est cliqué, un"-1«La valeur est transmise au«DisplaySlides ()”Méthode pour afficher l'image précédente sur le curseur:

fonctions setslides (num)
DisplaySlides (currentIndex + = num);

Étape 4: Définissez le style de l'élément HTML ajouté dans le «style.Fichier CSS

Ensuite, ajoutez le code indiqué ci-dessous dans le «style.CSS”Fichier pour spécifier le style des éléments HTML ajoutés:

.Imageslides
Affichage: aucun

img
marge: auto;
bloc de visualisation;
Largeur: 100%;

/ * Notre principal conteneur d'images-slideshow * /
.Images-Slideshow
largeur maximale: 612px;
Position: relative;
marge: auto;

/ * Style pour ">" Suivant et "<" previous buttons */
.Slider-Btn
curseur: pointeur;
Position: absolue;
en haut: 50%;
Largeur: Auto;
rembourrage: 8px 16px;
marge: -22px;
Couleur: RGB (0, 0, 0);
Police-poids: Bold;
taille de police: 18px;
transition: 0.6s facilité;
Border-Radius: 0 3px 3px 0;
utilisateur-sélection: aucun;
Color en arrière-plan: RGBA (255, 255, 255, 0.5);
Border-Radius: 50%;

/ * Définition de la position du bouton précédent vers la gauche * /
.précédent
Gauche: 2%;

/ * Définition de la position du bouton suivant vers la droite * /
.suivant
À droite: 2%;

/ * Sur planant, ajoutant une couleur d'arrière-plan * /
.Précédent: planant,
.Suivant: Hover
Couleur: RVB (255, 253, 253);
Color d'arrière-plan: RGBA (0, 0, 0, 0.8);

Après avoir enregistré le code ajouté, ouvrez le "indice.html”Fichier dans le navigateur et consultez le fonctionnement du curseur d'image créé:

Il s'agissait de créer un curseur d'image de base à l'aide de JavaScript. Vous pouvez approfondir les recherches pour ajouter une certaine variation dans le curseur d'image.

Conclusion

Au lieu d'utiliser des plugins jQuery, créant un curseur d'image à l'aide de javascript est considéré comme l'une des meilleures options. Il faut moins de temps pour la mise en œuvre et ne garantit pas d'erreurs ou de conflits. Un curseur d'image rend également une page Web plus innovante et attire l'attention des utilisateurs. Cette rédaction a discuté de la procédure pour créer un curseur d'image en javascript.