Contoh ini memberikan analisis komprehensif tentang penggunaan carousel di Bootstrap untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
File kode sumber:
Carousel.scss
Carousel.js
Prinsip Implementasi:
Sembunyikan semua elemen yang akan ditampilkan, dan kemudian tentukan bahwa blok saat ini akan ditampilkan, lebar dan tinggi yang dapat disesuaikan
Analisis Kode Sumber:
1. Struktur html: terutama dibagi menjadi empat bagian
1.1. Wadah: Div terluar, membutuhkan data-ride = "carousel" untuk ditentukan sebagai plug-in pemutaran roda, dan menyediakan ID untuk memfasilitasi asosiasi indikator lingkaran.
1.2. Bagian daftar gambar dibungkus dengan div luar, dan kemudian setiap IMG akan dibungkus dengan div, dan kelas dibungkus oleh item.
1.3. Circle Indicator: Gunakan daftar OL untuk menampilkan item daftar grafisnya. Setiap item daftar perlu menentukan atribut data-slide-to = "index", yang digunakan untuk menandai nomor indeks dari lingkaran saat ini.
1.4. Tombol Kontrol Kiri dan Kiri: Sadari fungsi bergerak ke kiri dan kanan
2. Gaya CSS
2.1. Carousel: Hanya ada satu tanda penentuan posisi relatif
2.2. Carousel-Inner: Putar area daftar gambar, di mana setiap item memiliki item untuk memodifikasinya
2.2.1. Aktif, berikutnya, dan prev dianggap terlihat.
2.2.2. CARousel-Caption: Ini berarti bahwa setiap item harus memiliki informasi judul, dan posisi default ditampilkan.
2.3. CARousel-Control: Mengatur gaya tombol kiri dan kanan, yang akan menetapkan informasi seperti gradien dan transparansi. Ini menyediakan dua gaya tambahan: ikon-prev dan ikon-next.
2.4. Carousel-Indicators: Gaya bagian lingkaran benar-benar diposisikan. Setiap Li diatur sebagai elemen blok inline. Gunakan Text-Indent: -999 untuk menyembunyikan font.
3. Kode JS
3.1. Metode inti utama adalah slide, yang mewujudkan switching gambar
3.1.1. Ketika sakelar gambar pertama kali dilakukan, metode jeda akan dipanggil untuk secara tentatif mengatur timer. Hanya setelah sakelar gambar selesai, metode siklus akan dipanggil untuk mengaktifkan timer.
3.1.2. Menerima dua parameter: ketik dan selanjutnya
3.1.2.1. Jenis: berarti mengubah halaman ke atas atau ke bawah
3.1.2.2. Berikutnya: Kali ini ditampilkan sebagai item item aktif. Jika tidak dilewati, Anda perlu menggunakan metode getitemfordirection untuk mendapatkannya.
3.1.3. Dapatkan parameter dasar seperti $ Active (item aktif saat ini), $ NEXT (item yang perlu menjadi item aktif), iscycling (pegangan timer untuk carousel timer), arah (arah) dan parameter dasar lainnya
3.1.4, lalu memicu acara Slide.bs.carousel
3.1.5. Kemudian atur item indeks indikator
3.1.6. Beralih gambar. Jika Anda mendukung animasi CSS, gunakan animasi untuk beralih. Jika tidak, tambahkan CSS secara langsung ke Switch.
3.1.7. Prinsip switching animasi:
3.1.7.1. Sebelumnya: Ini adalah gaya yang akan dikombinasikan dengan menggulir gambar ke kanan: Kanan aktif (item aktif) prev (item berikutnya). Pada saat ini, prev sendiri -100%, letakkan gambar ke kiri
3.1.7.2. Berikutnya: Gulir gambar ke kiri, dan kiri berikutnya (item berikutnya). Pada saat ini, selanjutnya adalah 100%, letakkan gambar di paling kanan.
3.1.7.3. Aktif Kanan: Gambarannya harus ke kanan, sehingga harus memindahkan 100% dari lebar gambar.
3.1.7.4. Kiri aktif: Gambar berada di sebelah kiri, maka lebar gambar harus dijalankan -100%
3.1.7.5. Gambar komparatif:
3.1.8. Kode Implementasi (tidak termasuk CSS3):
.carousel-inner> .active, .carousel-inner> .next, .carousel-inner> .prev {display: block;}. carousel-inner> .active {left: 0;}. carousel-inner> .next, .carousel-inner> .prev {posisi: absolute; TOP: 0; Lebar: 100%;}. Carousel-inner> .next {left: 100%;}. Carousel-inner> .prev {left: -100%;}. Carousel-inner> .next.left, .carousel-inner> .prev.right {kiri: 0;}. carousel-inner> .caktif. .active.right {kiri: 100%;}Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Berbagi topik yang indah: gambar jQuery carousel javascript gambar carousel bootstrap carousel
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.