Comment écrire un effet carrousel en utilisant CSS ?

Je crois que beaucoup de projets réalisés par mes amis ont un tel besoin de carrousels. Certains amis peuvent créer leurs propres roues, et d'autres peuvent créer directement des carrousels Google.

Mais si vous n'utilisez pas javascript, pouvez-vous obtenir l'effet d'images carrousel ? Peut-être que mes amis n'ont pas réfléchi à ce problème, alors utilisons CSS pour implémenter un simple graphique carrousel

Analyse des besoins de base

Parce que CSS ne peut pas obtenir le même contrôle précis que js , certains effets ne peuvent pas être obtenus, comme aider les utilisateurs à glisser vers la gauche et la droite pendant le carrousel, utilisez donc CSS pour obtenir intelligemment les effets de base. Le contenu listé ci-dessous est ce que nous avons implémenté :

1. Dans une zone fixe, le contenu interne glisse et bascule tout seul pour former un effet de lecture

2. du contenu, il inversera la lecture ou reviendra au point de départ pour rejouer

3. Chaque contenu restera pendant un certain temps afin que les utilisateurs puissent le voir clairement

4. Le contenu peut être cliqué/opéré

Construire la structure dom

Tout d'abord, il doit y avoir un conteneur comme conteneur pour le carrousel En même temps, car la commutation coulissante. doit être implémenté, il doit y avoir un sous-conteneur interne qui contient tout le contenu à changer

Si le contenu du sous-conteneur est commuté à gauche et à droite, vous devez organiser le contenu à gauche et à droite à droite

En prenant l'image du carrousel comme exemple, le code ci-dessus

<div class="loop-wrap">
    <div class="loop-images-container">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
        <img src="whiteland.jpg" alt="" class="loop-image">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
    </div>
</div>

.loop-wrap est le conteneur principal

.loop-images-container est un sous-conteneur qui transporte des images internes .

.loop-image est le contenu de l'image. Si vous avez besoin d'afficher d'autres contenus, vous pouvez personnaliser le

css pour obtenir des effets statiques. La largeur et la hauteur de chaque page de contenu du carrousel doivent être les mêmes et égales à la largeur et à la hauteur du conteneur principalLargeur et hauteur

.loop-wrap L'une des largeur et hauteur doit être plus grand que le conteneur principal externe Container, l'attribut

doit être défini sur

. Alors pourquoi ne pas le régler sur .loop-images-container ? Je ne vous le dirai pas, vous pouvez l'essayer vous-même ???overflow

.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}
.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
}
.loop-image{
    width: 500px;
    height: 300px;
}

hiddenOuvrez la page dans le navigateur ci-dessous, et vous pourrez voir une page statique sans effet carrousel Sauf la première image, les autres images sont toutes. sont invisiblesauto

css pour obtenir l'effet carrousel

L'effet carrousel est finalement un effet d'animation, et grâce aux nouveaux attributs de css3 nous pouvons le personnaliser Un animation pour obtenir l’effet carrousel. Jetons d'abord un coup d'œil à l'attribut

/*
animation: name duration timing-function delay iteration-count direction
name: 动画名
duration： 动画持续时间 设置为0则不执行
timing-function：动画速度曲线
delay：动画延迟开始时间 设置为0则不延迟
iteration-count：动画循环次数 设置为infinite则无限次循环
direction：是否应该轮流反向播放动画 normal 否 alternate 是
*/

animation animation. La valeur

est le nom de l'animation. Le nom de l'animation peut être utilisé pour créer des règles d'animation personnalisées

animation<.> Analyse de l'animation name @keyframes

Pour implémenter le carrousel, essentiellement le sous-conteneur

qui transporte le contenu à l'intérieur est déplacé, de sorte que le contenu à différents endroits soit affiché devant l'utilisateur en un seul temps Total Cinq images doivent être affichées. Si le carrousel prend 10 secondes au total, alors chaque image doit prendre 2 secondes (20 %). La consommation de temps de chaque image est composée du temps de commutation + du temps d'affichage. . Si la commutation prend 500 ms (5%), le temps d'affichage devrait être de 1500 ms (15%)

Donc le CSS a été transformé comme ça.loop-images-container

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}
/* 创建loop动画规则 */
/* 
   轮播5张，总耗时10s，单张应为2s(20%)
   单张切换动画耗时500ms，停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */
    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}
    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}
    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}
    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}
    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}

Dangdangdang~~~L'effet carrousel est complété avec. pure css

Les amis qui veulent voir l'effet directement peuvent cliquer sur le lien ci-dessous

Pure CSS pour réaliser l'effet carrousel

Il s'agit d'un effet carrousel dans une direction. Si vous souhaitez obtenir un effet aller-retour, Pour l'effet carrousel, les amis peuvent essayer les

de

, mais l'intervalle de temps des règles d'animation personnalisées doit également être recalculé !

Tutoriel recommandé : "

Tutoriel CSSdirection" alternate

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!