javascript - carta karusel css menyesuaikan diri dengan masalah reka letak

Question

Sama seperti reka letak karusel, bekas biru luar tidak mempunyai set lebar dan 100% boleh suai Lebar setiap subbekas adalah sama dengan lebar bekas induk dan dipaparkan dalam satu baris elemen tersembunyi Tanpa menggunakan js Bolehkah ia dicapai dalam keadaan tertentu?

学习ing · Answer

Kesan yang serupa boleh dicapai hanya dengan bergantung pada CSS:

HTML：

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

学习ing · Answer

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/

女神的闺蜜爱上我 · Answer

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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?