Scribd
Importer
6 vues1 page

Gestion d'un slider d'images dynamique

L'algorithme Slider permet d'afficher des images en les empilant et en gérant une classe 'active' pour l'image visible. Il inclut des fonctions pour naviguer entre les images avec des clics sur 'suivant' et 'précédent', tout en évitant les débordements d'étape. De plus, il propose une fonctionnalité de défilement automatique des images toutes les 3 secondes.

Transféré par

stg.dev
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues1 page

Gestion d'un slider d'images dynamique

L'algorithme Slider permet d'afficher des images en les empilant et en gérant une classe 'active' pour l'image visible. Il inclut des fonctions pour naviguer entre les images avec des clics sur 'suivant' et 'précédent', tout en évitant les débordements d'étape. De plus, il propose une fonctionnalité de défilement automatique des images toutes les 3 secondes.

Transféré par

stg.dev
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Algorithme Slider

01
Empiler les images les unes sur
02 Gestion de la classe “active”
les autres
L’image qui aura la classe “active”
sera celle qui sera en opacité à 1, les
autres seront en opacité 0

03
Les variables utiles
04 Les fonctions
img__slider : Liste de toutes les enleverActiveImages() : Permet
images. d’enlever la classe active sur toutes
etape : Permet de savoir quelle les images.
image afficher.
nbr__img : Permet de savoir le
nombre d’images.

05
Les évènements

Clic sur “suivant” : Incrémenter l’étape, enlever la classe active sur toutes les images
sauf sur l’image correspondant à l’étape courante.
Mais attention : Si l’étape est supérieure ou égale au nombre d’image, alors il faudra
remettre l’étape à 0 afin de ne pas essayer d’afficher une image qui n’existe pas.

Clic sur “précédent” : Décrémenter l’étape, enlever la classe active sur toutes les
images sauf sur l’image correspondant à l’étape courante.
Mais attention : Si l’étape est inférieure à 0, alors il faudra remettre l’étape à
nbr__img - 1 afin de ne pas essayer d’afficher une image qui n’existe pas.

06
Faire défiler automatiquement le slider
Utiliser “setInterval” pour exécuter une fonction qui affiche l’image suivante toutes les 3
secondes.

Vous aimerez peut-être aussi