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!