Maison > Article > interface Web > Comment implémenter un carrousel d'images en utilisant du CSS pur

Comment implémenter un carrousel d'images en utilisant du CSS pur

醉折花枝作酒筹original: 2021-04-02 14:42:024158parcourir

En CSS, vous pouvez utiliser des attributs d'animation et des règles @keyframes pour obtenir des effets de carrousel d'images. Utilisez simplement @keyframes pour créer d'abord l'animation ; puis utilisez l'attribut d'animation pour définir la durée, la vitesse et le nombre d'animations requises.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

Préparez d'abord plusieurs images de même taille, et les images seront affichées horizontalement. Placées dans un conteneur d'images. Ajoutez un conteneur d'affichage en dehors du conteneur d'image. La taille du conteneur d'affichage 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.

L'effet d'animation est divisé en deux parties : la commutation et le maintien. L'étape d'animation personnalisée est liée au nombre d'images, et la valeur de décalage de chaque étape de l'animation est liée à la taille de l'image.

L'exemple dans cet article est de passer de la première image à la dernière image.

HTML

<body>
        <div id="container">
            <div id="photo">
                <img  src="images/1.jpg" / alt="Comment implémenter un carrousel d'images en utilisant du CSS pur" >
                <img  src="images/2.jpg" / alt="Comment implémenter un carrousel d'images en utilisant du CSS pur" >
                <img  src="images/3.jpg" / alt="Comment implémenter un carrousel d'images en utilisant du CSS pur" >
            </div>
        </div>
    </body>

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

<style type="text/css">
            #container {
                width: 400px;
                overflow: hidden;
            }
            #photo {
                width: 1200px;
                animation: switch 5s ease-out infinite;
            }
            #photo > img {
                float: left;
                width: 400px;
            }
            @keyframes switch {
                0%, 25% {
                    margin-left: 0;
                }
                35%, 60% {
                    margin-left: -400px;
                }
                70%, 100% {
                    margin-left: -800px;
                }
            }
        </style>

Rendu :

Comment implémenter un carrousel dimages en utilisant du CSS pur

Analyse :

La taille du conteneur d'affichage est la même que la taille de l'image
Ajoutez un effet flottant à l'image sans avoir à prendre en compte le problème de marge gênant
Comme 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 ; définir La scène (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 commutation d'animation. La durée de chaque partie doit être définie. être contrôlé par vous-même.
Étude recommandée : "
Tutoriel vidéo CSS

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment rendre le contenu non sélectionnable en CSSArticle suivant：Comment rendre le contenu non sélectionnable en CSS

Articles Liés

Voir plus