recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Le graphique carrousel CSS s'adapte au problème de mise en page

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 ?

给我你的怀抱给我你的怀抱2730 Il y a quelques jours1078

répondre à tous(3)je répondrai

  • 学习ing

    学习ing2017-06-13 09:25:41

    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

    répondre
    0
  • 学习ing

    学习ing2017-06-13 09:25:41

    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/

    répondre
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-13 09:25:41

    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

    .

    répondre
    0
  • Annulerrépondre