Comment créer un curseur d'image simple avec HTML, CSS et JQuery

Carrousels d'image, curseurs d'images, peu importe pourquoi vous les appelez, ce mode est si visible sur Internet que presque tous les sites Web en ont un. Si vous êtes un développeur Web, vous pouvez vous retrouver avec vous-même. Dans cet esprit, voyons comment construire un curseur d'image simple à l'aide de HTML, CSS et JQuery.

Structure HTML

Tout d'abord, nous créons un élément de conteneur qui a le nom de classe container. Le conteneur contient nos photos. L'image est enveloppée de balises div afin que le diaporama puisse être converti en lien ou contenu autre que l'image peut être utilisée comme diaporama. Le premier conteneur div a des styles en ligne pour s'assurer que la première image du curseur est visible lorsque la page se charge. Il existe également deux éléments de bouton pour la boucle manuelle via des diaporamas en fonction des demandes utilisateur.

CSS Style

Ici, nous définissons le curseur d'image, le conteneur div et la largeur de leurs images internes. Il convient de noter que tous nos conteneurs div sont définis sur display: none;. Si ce n'est pas le cas, toutes nos photos seront visibles en même temps. Nous utiliserons JavaScript pour définir un conteneur div et le reste reste caché. display: inline-block;

Interaction JavaScript

Tout d'abord, nous devons définir certaines variables importantes. La première variable est

, qui est définie sur 0. La deuxième variable est currentIndex, qui est définie sur items. Cela renverra une liste de conteneurs contenant des images. La troisième variable est $('.container div'), qui est définie sur la longueur de la variable. La dernière variable nous indique le nombre total de diapositives dans le curseur d'image. div itemAmt Ensuite, nous créons une fonction appelée "CycleItems". Cette fonction sera utilisée pour afficher l'image correcte tout en garantissant que les autres images restent masquées. À l'intérieur de cette fonction, nous créons une variable nommée items. Cette variable est définie sur

. La méthode

fournie par jQuery prend un entier et localisera le premier élément renvoyé par item qui correspond à l'entier. Par conséquent, si $('.container div').eq(currentIndex) est 0, eq sera positionné dans le premier conteneur d'image dans le curseur d'image. À l'intérieur de notre fonction $('.container div'), la prochaine chose à faire est de masquer tous nos conteneurs d'image currentIndex et de définir $('.container div').eq(currentIndex) sur cycleItems. div

Pour nous assurer que notre image tourne automatiquement, nous devons fournir un moyen d'appeler en continu notre fonction cycleItems après une certaine période de temps. Nous le faisons en créant une autre variable appelée autoSlide. Cette variable stocke une fonction setInterval qui prend un retard de 3000 millisecondes, soit trois secondes. À l'intérieur de cette fonction, nous ajoutons 1 à la variable currentIndex de sorte que $('.container div').eq(currentIndex) se réfère toujours au prochain conteneur div. Ensuite, nous définissons une déclaration "si" très importante. Cette déclaration signifie que si notre variable currentIndex est supérieure au nombre total d'images dans le curseur, la variable est réinitialisée à zéro. Si nous n'avons pas cette instruction, nous ne pouvons pas parcourir notre liste d'images. Après l'instruction if, nous appelons la fonction cycleItems.

Ensuite, nous définissons les opérations précédentes et suivantes. Ceux-ci définissent ce qui se passe lorsque nous cliquons sur les boutons précédents et suivants. Ils fonctionnent de manière similaire à la fonction autoSlide, sauf qu'ils annulent la boucle automatique lorsqu'ils cliquent. Pour faire un peu manuellement dans le diaporama, cliquer sur le bouton Suivant ajoutera 1 à la variable currentIndex, et cliquer sur le bouton précédent réduira la variable currentIndex par 1.

démo

Affichez la démo sur Codepen

Contenu supplémentaire

Pour voir le curseur d'image construit en utilisant uniquement CSS et HTML, consultez la démo de Zack Wallace! (Le lien doit être inséré ici, et vous pouvez fournir un lien si nécessaire)

FAQ (FAQ)

(cela peut être réécrit et poli en fonction de la partie FAQ d'origine, de sorte que l'expression du langage est plus naturelle et lisse tout en maintenant la cohérence du contenu)

À travers les étapes ci-dessus, vous pouvez créer un curseur d'image simple. N'oubliez pas que vous pouvez ajuster votre style CSS et votre code JavaScript à vos besoins pour différents effets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!