cari

Rumah  >  Soal Jawab  >  teks badan

javascript - carta karusel css menyesuaikan diri dengan masalah reka letak

Serupa dengan susun atur karusel, bekas biru luar tidak menetapkan lebar dan 100% boleh suai Lebar setiap sub-bekas adalah sama dengan lebar bekas induk dan dipaparkan dalam satu baris elemen tersembunyi Tanpa menggunakan js Bolehkah ia direalisasikan dalam keadaan?

给我你的怀抱给我你的怀抱2769 hari yang lalu1098

membalas semua(3)saya akan balas

  • 学习ing

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

    Kesan yang serupa boleh dicapai hanya dengan bergantung pada 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 untuk melihat sama ada itu yang anda mahukan

    balas
    0
  • 学习ing

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

    Saya memikirkan dua kaedah: flex dan inline-block
    Lebar bekas ditetapkan untuk memudahkan pemerhatian
    Secara logiknya, ia juga boleh digunakan tetapi anda perlu menetapkan kedudukan satu demi satu, jadi saya lakukan jangan buat.

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

    balas
    0
  • 女神的闺蜜爱上我

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

    Saya pernah menggunakan CSS tulen untuk membuat karusel Mengenai perkara yang anda nyatakan, ia sepatutnya boleh, tetapi saya belum melakukannya sendiri, jadi saya tidak pasti

    balas
    0
  • Batalbalas