Menerapkan tata letak web sederhana yang berisi lima kotak berbeda, masing-masing dengan gambar latar belakang berbeda dan beberapa jarak di antara kotak tersebut. Saat Anda mengarahkan kursor ke kotak, gambar latar belakangnya meredup dan teks menjadi putih. Kotak dan kancing ditempatkan dalam sebuah wadah dan seluruh halaman tampak seperti galeri.
<div kelas="wadah">
<div id="slide">
<div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div kelas="tombol">
<div kelas="kiri">
< Sebelumnya</div>
<div class="center">Unduh wallpaper</div>
<div class="right">Berikutnya ></div>
</div>
</div>
</div> * {
margin: 0;
bantalan: 0;
ukuran kotak: kotak perbatasan;
}
.wadah {
lebar: 100vw;
tinggi: 100vh;
posisi: relatif;
meluap: tersembunyi;
}
.barang {
lebar: 240 piksel;
tinggi: 160 piksel;
posisi: mutlak;
atas: 50%;
kiri: 0;
transformasi: terjemahkanY(-50%);
radius batas: 10px;
bayangan kotak: 0 30px 50px #505050;
ukuran latar belakang: sampul;
posisi latar belakang: tengah;
transisi: 1 detik;
}
.item:anak ke-n(1),
.item:anak ke-n(2) {
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 100%;
transformasi: terjemahkanY(0);
bayangan kotak: tidak ada;
radius batas: 0;
}
.item:anak ke-n(3) {
kiri: 70%;
}
.item:anak ke-n(4) {
kiri: kalk(70% + 250 piksel);
}
.item:anak ke-n(5) {
kiri: kalk(70% + 500 piksel);
}
.item:anak ke-n(n+6) {
kiri: kalk(70% + 750px);
opacity: 0;
}
.tombol {
lebar: 100%;
posisi: mutlak;
bawah: 50 piksel;
margin-kiri: -50px;
perataan teks: tengah;
tampilan: fleksibel;
justify-content: tengah;
}
.tombol div {
lebar: 120 piksel;
tinggi: 50 piksel;
tinggi garis: 50px;
perataan teks: tengah;
radius batas: 5px;
margin: 0 25 piksel;
transisi: 0,5 detik;
kursor: penunjuk;
pilih pengguna: tidak ada;
ukuran font: 20px;
warna: #fff;
warna latar belakang: rgba(0, 0, 0, 0.4);
bayangan kotak: 2px 2px 2px rgba(0, 0, 0, 0.2);
} const leftBtn = dokumen.querySelector(".buttons .left")
const rightBtn = dokumen.querySelector(".buttons .right")
const slide = dokumen.querySelector("#slide")
let openClick = true // Pemrosesan throttle (untuk memastikan proses eksekusi animasi, tombol tidak diklik berulang kali)
leftBtn.addEventListener("klik", () => {
jika (bukaKlik) {
openClick = false // Setelah memicu klik, nonaktifkan tombol const items = document.querySelectorAll(".item")
slide.prepend(item[item.panjang - 1])
setTimeout(() => openClick = true, 1000) // 1 detik untuk membuka tombol lagi}
})
rightBtn.addEventListener("klik", () => {
jika (bukaKlik) {
bukaKlik = salah
const item = dokumen.querySelectorAll(".item")
slide.appendChild(item[0])
setTimeout(() => openClick = benar, 1000)
}
}) * {
margin: 0;
bantalan: 0;
ukuran kotak: kotak perbatasan;
}Kode ini mengatur gaya CSS global, termasuk mengatur model kotak elemen menjadi border-box, yaitu lebar dan tinggi model kotak menyertakan batas dan bantalan elemen, bukan hanya konten elemen.
.wadah {
lebar: 100vw;
tinggi: 100vh;
posisi: relatif;
meluap: tersembunyi;
}Kode ini mengatur gaya CSS container, termasuk mengatur lebar dan tinggi container menjadi 100vw dan 100vh, yang merupakan lebar dan tinggi viewport. Pada saat yang sama, atur posisi wadah ke posisi relatif, yaitu posisi relatif terhadap elemen induknya. Terakhir, atur properti overflow wadah menjadi tersembunyi, yaitu elemen yang melebihi cakupan wadah tidak akan ditampilkan.
.barang {
lebar: 240 piksel;
tinggi: 160 piksel;
posisi: mutlak;
atas: 50%;
kiri: 0;
transformasi: terjemahkanY(-50%);
radius batas: 10px;
bayangan kotak: 0 30px 50px #505050;
ukuran latar belakang: sampul;
posisi latar belakang: tengah;
transisi: 1 detik;
}Kode ini mengatur gaya CSS kotak, termasuk mengatur lebar dan tinggi kotak menjadi 240px dan 160px, yang merupakan ukuran kotak. Pada saat yang sama, atur posisi kotak ke posisi absolut, yaitu posisi relatif terhadap elemen induknya. Terakhir, atur radius batas kotak menjadi 10px, yaitu sudut kotak yang membulat. Ukuran gambar background kotak adalah cover yang menutupi keseluruhan kotak. Gambar latar belakang berada di tengah. Terakhir, atur efek transisi kotak menjadi 1 detik, yaitu waktu efek transisi adalah 1 detik.
.item:anak ke-n(1),
.item:anak ke-n(2) {
kiri: 0;
atas: 0;
lebar: 100%;
tinggi: 100%;
transformasi: terjemahkanY(0);
bayangan kotak: tidak ada;
radius batas: 0;
}Kode ini mengatur gaya CSS untuk kotak pertama dan kedua, termasuk mengatur posisinya ke 0, yang berarti menutupi bagian atas wadah. Selain itu, atur tingginya menjadi 100%, yang berarti menutupi seluruh tinggi wadah. Terakhir, atur properti transformasinya ke TranslateY(0), yang berarti properti tersebut tidak akan bergerak ke bawah. Juga, atur radius bayangan dan batasnya ke 0, yaitu tidak memiliki bayangan dan batas.
.item:anak ke-n(3) {
kiri: 70%;
}Kode ini mengatur gaya CSS kotak ketiga, termasuk mengatur posisinya menjadi 70% dari sisi kiri wadah.
.item:anak ke-n(4) {
kiri: kalk(70% + 250 piksel);
}Kode ini mengatur gaya CSS kotak keempat, termasuk mengatur posisinya menjadi 250px dari sisi kanan kotak ketiga.
.item:anak ke-n(5) {
kiri: kalk(70% + 500 piksel);
}Kode ini mengatur gaya CSS kotak kelima, termasuk mengatur posisinya menjadi 500px dari sisi kanan kotak ketiga.
.item:anak ke-n(n+6) {
kiri: kalk(70% + 750px);
opacity: 0;
}Kode ini mengatur gaya CSS untuk semua kotak, termasuk mengatur posisinya menjadi 750px dari kanan kotak ketiga. Juga, atur opacitynya ke 0, yaitu tidak terlihat.
.tombol {
lebar: 100%;
posisi: mutlak;
bawah: 50 piksel;
margin-kiri: -50 piksel;
perataan teks: tengah;
tampilan: fleksibel;
justify-content: tengah;
}Kode ini untuk mengatur gaya CSS tombol, termasuk mengatur lebar tombol menjadi 100%, yaitu ukuran tombol sama dengan wadahnya. Pada saat yang sama, atur posisi tombol menjadi 50px dari bagian bawah wadah. Terakhir, atur perataan tombol ke perataan tengah, yang berarti tombol berada di tengah secara horizontal.
.tombol div {
lebar: 120 piksel;
tinggi: 50 piksel;
tinggi garis: 50px;
perataan teks: tengah;
radius batas: 5px;
margin: 0 25 piksel;
transisi:.5 detik;
kursor: penunjuk;
pilih pengguna: tidak ada;
ukuran font: 20px;
warna: #fff;
warna latar belakang: rgba(0, 0, 0, 0.4);
bayangan kotak: 2px 2px 2px rgba(0, 0, 0, 0.2);
}Kode ini untuk mengatur gaya CSS tombol, termasuk mengatur lebar tombol menjadi 120px dan tinggi menjadi 50px, yang merupakan ukuran tombol. Pada saat yang sama, atur tinggi baris tombol menjadi 50px, yang merupakan tinggi tombol. Perataan teks tombol berada di tengah, yaitu teks dipusatkan secara horizontal. Jari-jari batas tombol adalah 5 piksel, yang merupakan sudut bulat tombol. Margin tombol adalah 0 25px, yaitu jarak antara sisi kiri dan kanan tombol pada arah horizontal adalah 25px. Efek transisi tombol adalah 0,5 detik, yaitu waktu efek transisi adalah 0,5 detik. Atribut kursor pada tombol adalah pointer, yaitu ketika mouse diarahkan ke atas tombol maka bentuk mouse akan berubah menjadi bentuk tangan. Atribut pilihan pengguna pada tombol tidak ada, artinya pengguna tidak dapat memilih teks pada tombol. Ukuran font tombol adalah 20 piksel, yang merupakan ukuran teks tombol. Warna teks tombol adalah putih, yang merupakan warna teks tombol. Warna latar belakang tombol adalah rgba(0, 0, 0, 0.4), yaitu warna latar belakang tombol adalah hitam dan transparansinya 0.4. Properti bayangan tombol adalah 2px 2px 2px rgba(0, 0, 0, 0.2), yaitu bayangan tombol adalah 2px 2px 2px hitam dan transparansinya adalah 0.2.
Demikianlah artikel tentang contoh kode carousel panorama HTML+CSS. Untuk konten carousel panorama HTML CSS lainnya, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait berikut lebih banyak lagi di masa depan!