Comment utiliser CSS pour obtenir un effet carrousel d'images ? (exemple de code)

Cet article vous présentera comment obtenir un effet carrousel d'images avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Tutoriel recommandé : Tutoriel vidéo CSS]

Base théorique

CSS3 propriétés d'animation et règles @keyframes

Idée principale

• Préparer plusieurs images de la même taille

• Disposez les images à afficher horizontalement dans un conteneur d'images

• Ajoutez un conteneur d'affichage à l'extérieur du conteneur d'images, et la taille du conteneur d'affichage est la taille de l'image

• Ajoutez une animation personnalisée au conteneur d'images et définissez des valeurs de décalage incrémentielles à différentes étapes de l'animation

Notes

• L'effet d'animation est divisé en deux parties : basculer et rester

• L'étape d'animation personnalisée est liée au nombre d'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 dans l'exemple dans cet article. Une idée est de passer de la dernière image à la première image une par une

HTML

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

Analyse :
Trois éléments img sont créés ici. À l'extérieur de l'élément img se trouve un conteneur d'image et à l'extérieur du conteneur d'image se trouve un conteneur d'affichage.

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 :

• La taille du conteneur d'affichage est la même que la taille de l'image
• Ajouter un flottant effet sur l'image, pas besoin Considérez le problème de marge gênant
• Étant donné que l'exemple ne comporte que trois images, trois étapes d'animation sont ajoutées. Chaque étape obtient l'effet de commutation en définissant une valeur de marge gauche croissante
<.>Paramètres L'étape d'animation (par exemple : 35 % ~ 60 %) est la partie de séjour de l'animation, et le temps libre de l'étape précédente (par exemple : 25 % ~ 35 %) est la partie de changement d'animation. la pièce doit être contrôlée par vous-même

Effet de fonctionnement

Vidéo de programmation ! !

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!