Mari kita lihat efek carousel gambar bootstrap:
Di atas adalah efek yang dibagikan oleh semua orang, tetapi ini adalah beranda musik cloud Netease.
Ingatlah untuk pertama kali muncul di perpustakaan kontrol resmi iOS7, dan Android juga menambahkan tampilan ini ke versi tertentu. Desainnya universal..bootstrap3 juga mendukung penggunaan efek tersebut di web.
Selanjutnya, analisis sederhana:
1. Analisis Struktural
Gambar korsel terutama mencakup tiga bagian:
☑ Gambar korsel
☑ Counter for Carousel Pictures
☑ Pengontrol untuk gambar korsel
Langkah 1: Desain wadah untuk gambar korsel. Gaya carousel diadopsi dalam kerangka bootstrap, dan nilai ID didefinisikan untuk wadah ini, sehingga atribut data digunakan untuk mendeklarasikan pemicu nanti.
Salin kode sebagai berikut: <div id = "slidershow"> </div>
Langkah 2: Desain penghitung gambar korsel. Tambahkan kalkulator gambar carousel di dalam wadah div.carousel, menggunakan gaya carousel-indikator. Fungsi utamanya adalah untuk menampilkan urutan pemutaran gambar saat ini (ada beberapa gambar, dan yang berikut adalah daftar yang sama umumnya digunakan untuk membuatnya:
<Div id = "slidershow"> <!-atur urutan carousels gambar-> <l> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </l> </div>
Langkah 3: Desain area pemutaran gambar carousel. Dalam seluruh efek citra korsel, area pemutaran adalah area paling kritis, yang terutama digunakan untuk menempatkan gambar yang perlu dikorotus. Area ini dikendalikan menggunakan gaya carousel-inner, dan juga ditempatkan di wadah carousel, dan setiap gambar korsel ditempatkan melalui wadah item:
<Div ID = "Slidershow"> <!-Tetapkan urutan carousel gambar-> <ol> <li> 1 </li> ... </ol> <!-atur gambar carousel-> <ve> <a href = "##" <img src = "http://images3.c-ctrip.com/rk/20144." </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div> <v> <a href = "##"> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>… <verv> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div>
Langkah 4: Setel deskripsi gambar carousel. Banyak efek gambar korsel juga memiliki judul dan deskripsi sendiri konten pada setiap gambar. Faktanya, Carousel dalam kerangka bootstrap juga memberikan efek serupa. Cukup tambahkan kode yang sesuai di bagian bawah gambar dalam item.
<Div id = "slidershow"> <!-atur urutan carousels gambar-> <ol> <li> 1 </li> ... </ol> <!-atur gambar carousel-> <vet> <a href = "##"> <mg src = "http://images3.c-ctrip.com/rk/201." <!-Judul Corporing Judul dan Deskripsi Konten-> <div> <h3> Judul gambar </h3> <p> Deskripsi konten ... </p> </div> </div> ... </div> </div>
Langkah 5: Desain pengontrol gambar carousel. Berkali -kali gambar carousel juga memiliki pengontrol yang diputar ke depan dan ke belakang. Di Carousel, dicapai dengan menggabungkan kiri dan kanan dengan gaya kontrol korsel. Di mana kiri berarti pemutaran ke depan, kanan berarti pemutaran mundur. Itu juga ditempatkan di wadah korsel:
<div id="slidershow"> <!-- Set the order of picture carousels --> <ol> … </ol> <!-- Set the carousel pictures --> <div> … </div> <!-- Set the carousel picture controller --> <a href="" > <span></span> </a> <a href=""> <span></span> </a> </div>
2. Proses Implementasi
<Div id = "carousel-example-generic" data-ride = "carousel"> <!-indikator-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generik" data-slide-to = " data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </l> <!-wrapper untuk slide-> <div role = "listbox"> <v> <img src = "..."> <v> ... </Div> </Div> <v> <img src = "..."> </Div> </Div> <Div> <IMG SRC = "... <!-Controls-> <a href = "#carousel-example-generic" role = "button" data-slide = "prev"> <span> </span> <span> sebelumnya </span> </a> <a href = "#span-span-span-span-span </span> </span> </rentang sanah </rentang/</span> </span> </span> </span> </span </span> </span </span> </span </span </span order </span </span </span </span </span> </span </span berikutnya </span </span order </span next" Data-slide = "NEXTAN" DEVER </Span> Span> Span order "DATA" DATA-SLIDE = "SPANET" NEXK "> </Span>
Dibagi menjadi tiga bagian
1. Indikator
Satu bagian adalah titik kecil di bawah ini ... adalah indikatornya
Kelas OL digunakan untuk membuat indikator ini
Setiap atribut data-slide-to = "0" digunakan untuk memandu lokasi untuk menentukan status aktivasi default.
barang
<div> <img src = "..."> <viv> <h3> ... </h3> <p> ... </p> </div> </div>
Tidak ada ketegangan, cukup isi judul dan konten gambar
2. Pengendali Kiri dan Kiri
Kodenya adalah sebagai berikut
<a href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a>
Operasi di JavaScript
inisialisasi
$ ('. Carousel'). Carousel ({Interval: 2000})Melaksanakan
.carousel ('siklus')
berhenti sebentar
.carousel ('jeda')
Posisikan ke item tertentu dimulai dari 0
.carousel (angka)
Yang sebelumnya
.carousel ('prev')
Berikutnya
.carousel ('berikutnya')
Lebih banyak konten tentang bootstrap juga dapat ditemukan dalam topik khusus: "Tutorial Pembelajaran Bootstrap"
Di atas adalah pengantar rinci untuk JavaScript Picture Carousel. Saya harap artikel ini akan membantu semua orang dalam mempelajari pemrograman JavaScript.