简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Le graphique carrousel CSS s'adapte au problème de mise en page
给我你的怀抱
给我你的怀抱 2017-06-13 09:23:41
0
3
1057

Semblable à la disposition du carrousel, le conteneur bleu externe ne définit pas la largeur et est 100 % adaptatif. La largeur de chaque sous-conteneur est égale à la largeur du conteneur parent et est affichée dans une rangée. Les éléments sont masqués. Sans utiliser js. Cela peut-il être réalisé dans ces circonstances ?

给我你的怀抱
给我你的怀抱

répondre à tous(3)
学习ing
学习ing2017-06-13 09:25:41 3 plancher

Des effets similaires peuvent être obtenus simplement en s'appuyant sur CSS : 

HTML：
<body style='margin: 0;'>
    <p style='position: absolute;width: 40%;height: 100%;background-color: blue;overflow: hidden;'>
        <p class="p1" style='position: absolute;width: 100%;height: 80%;background-color: orange;top: 10%;left: 200%;'></p>
        <p class="p2" style='position: absolute;width: 100%;height: 80%;background-color: green;top: 10%;left: 200%;'></p>
        <p class="p3" style='position: absolute;width: 100%;height: 80%;background-color: red;top: 10%;left: 200%;'></p>
    </p>
</body>
CSS：
.p1{
    animation: pleft 6s infinite linear;
    -webkit-animation: pleft 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
@keyframes pleft{
    0%{left: 200%}
    100%{left: -100%}
}
.p2{
    animation: pmid 6s infinite linear;
    -webkit-animation: pmid 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-delay:2s;
    -webkit-animation-delay:2s;
}
@keyframes pmid{
    0%{left: 200%}
    100%{left: -100%}
}
.p3{
    animation: pright 6s infinite linear;
    -webkit-animation: pright 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-delay:4s;
    -webkit-animation-delay:4s;
}
@keyframes pright{
    0%{left: 200%}
    100%{left: -100%}
}

jsfiddle.net pour voir si c'est ce que tu veux

Comme +0
Ajouter une réponse
学习ing
学习ing2017-06-13 09:25:41 2 plancher

J'ai pensé à deux méthodes : flex et inline-block
La largeur du conteneur est définie pour faciliter l'observation
Logiquement parlant, il est également possible d'utiliser le positionnement. Mais il faut définir le positionnement un par un, donc je l'ai fait. ne le fais pas.

https://jsfiddle.net/m41tLwqb/1/
https://jsfiddle.net/2zcqqj26/

Comme +0
Ajouter une réponse
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-13 09:25:41 1 plancher

J'ai utilisé du CSS pur pour créer un carrousel Quant à ce que vous avez mentionné, cela devrait être possible, mais je ne l'ai pas fait moi-même, donc je ne peux pas en être sûr

.
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！