Maison >interface Web >tutoriel CSS >Comment implémenter un carrousel d'images en utilisant du CSS pur
Idées de mise en œuvre :
(apprentissage recommandé : démarrage rapide en CSS)
Préparez le même taille Plusieurs images
Disposez les images à afficher horizontalement dans un conteneur d'images
Ajoutez un conteneur d'affichage à l'extérieur du conteneur d'images pour afficher le conteneur La taille est la taille de l'image
Ajoutez une animation personnalisée au conteneur d'image et définissez des valeurs de décalage incrémentielles à différentes étapes de l'animation
Remarques :
L'effet d'animation est divisé en deux parties : basculer et rester
L'étape d'animation personnalisée est liée au nombre de images
La valeur de décalage de chaque étape de l'animation est liée à la taille de l'image
Il n'y a pas d'effet de commutation de la dernière image à la première image de l'exemple de cet article. Une idée est de passer une par une à partir de la dernière image
Code HTML :
<div id="container"> <div id="photo"> <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> </div> </div>.
Analyse du code :
Trois éléments img sont créés ici, à l'extérieur de l'élément img. C'est un conteneur d'image, et à l'extérieur du conteneur d'image se trouve un conteneur d'affichage.
Code CSS :
#container { width: 400px; height: 300px; overflow: hidden; } #photo { width: 1200px; animation: switch 5s ease-out infinite; } #photo > img { float: left; width: 400px; height: 300px; } @keyframes switch { 0%, 25% { margin-left: 0; } 35%, 60% { margin-left: -400px; } 70%, 100% { margin-left: -800px; } }
Analyse du code :
La taille du conteneur d'affichage est cohérente avec la taille de l'image
Ajoutez des effets flottants aux images sans avoir à vous soucier des problèmes de marge gênants.
Comme l'exemple ne comporte que trois images, trois étapes d'animation sont ajoutées, chaque étape est réalisée en définissant une valeur croissante. margin-left La valeur atteint l'effet de commutation
L'étape d'animation définie (par exemple : 35 % ~ 60 %) est la partie de maintien de l'animation et le temps d'inactivité de l'étape précédente (par exemple, 25 % ~ 35 %) : lorsque vous changez de partie pour l'animation, vous devez contrôler vous-même la longueur de chaque partie
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!