Saya telah berbagi tiga efek bootstrap carousel gambar, dan saya percaya selalu ada satu yang Anda puas!
Efek Pertama: Bootstrap Simple Carousel
<! Doctype html> <html> <head> <title> bootstrap instance- plug-in carousel sederhana </iteme> <link href = "/bootstrap/3.0.3/css/bootstrap.min.min.css" rel = "stylesheet"> <script src = "/jQuery/2.0.0.0.0.0. src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel Metrics--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-t = "2"> </li> </l> <!-Proyek Carousel-> <veN> <img src = "/wp-content/unggah/2014/07/slide1.png"> </divg> div/unggah/2014/07/slide1.png "> </Divg> </Divg> </Diver> </Divg> </Divg> </Divg> </Divg> </Div> src = "/wp-content/unggah/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/unggah/2014/07/slide3.png"> </div> </div> <!-Navigasi Korban-> <a href = "#"#"#"#"#" DATED "#" DATED "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" DATED "#" DATER "#"#" href = "#mycarousel" data-slide = "next"> ›</a> </div> </body> </html>
Tipe kedua: Carousel dengan judul (manual)
<! Doctype html> <html> <head> <title> Bootstrap Instance - Judul plug -in carousel </iteme> <link href = "/bootstrap/3.0.3/css/bootstrap.min.min.css" rel = "stylesheet"> <script src = "/jQuery/2.0. src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel Metrics--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-t = "2"> </li> </l> <!-Proyek Carousel-> <veV> <img src = "/wp-content/unggah/2014/07/slide1.png"> <g> div> div </unggah/2014/07/slide1.png "> <g> div> div/unggah/2014/07/slide1.png"> <g> tited/unggah/2014/07/slide1.png "> <g> title/unggah/2014/07/slide1.png"> src = "/wp-content/unggah/2014/07/slide2.png"> <verv> Judul 2 </div> </div> <v> <img src = "/wp-content/unggahan/2014/07/slide3.png"> <div> Judul 3 </Div> </Div> </Div> = = = = =/navigasi </Div> </Div> </Div> </Div> NAVIGE-BIVIGE-BIVIGET "> data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> ›</a> </div> </body> </html>
Jenis ketiga: JS Control Automatic Carousel
<! Doctype html> <html> <head> <title> bootstrapjs mengontrol carousel </iteme> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/jQuery/2.0.0.0.0.0.0.0.0.0. src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0" ></li> <li data-target="#myCarousel" data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-t = "2"> </li> </l> <!-Proyek Carousel-> <veN> <img src = "/wp-content/unggah/2014/07/slide1.png"> </divg> div/unggah/2014/07/slide1.png "> </Divg> </Divg> </Diver> </Divg> </Divg> </Divg> </Divg> </Div> src = "/wp-content/unggah/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/unggah/2014/07/slide3.png"> </div> </div> <!-Navigasi Korban-> <a href = "#"#"#"#"#" DATED "#" DATED "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" DATED "#" DATER "#"#" href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div></div> <script> $(function(){ // Initialize carousel$(".start-slide").click(function(){ $("#myCarousel").carousel('cycle'); }); // Stop carousel $ (". Jeda-Slide"). Klik (function () {$ ("#MyCarousel"). Carousel ('Pause');}); $ (". Next-Slide"). Klik (function () {$ ("#MyCarousel"). Carousel ('NEXT');}); "#MyCarousel"). Carousel (1); }); </script> </body> </html>Parameter spesifik dapat diatur dalam metode carousel (), seperti:
Saat menggunakannya, Anda dapat melewati parameter status yang relevan saat menginisialisasi plug-in, seperti:
$ ("#slidershow"). Carousel ({interval: 3000});Plug-in Carousel dalam kerangka Bootstrap juga menyediakan beberapa metode panggilan khusus kepada pengguna, sebagai berikut:
.carousel ("siklus"): Bermain dari kiri ke kanan;
.carousel ("jeda"): hentikan pemutaran loop;
.carousel ("angka"): loop ke bingkai yang ditentukan, subskrip dimulai dari 0, mirip dengan array;
.carousel ("prev"): kembali ke bingkai sebelumnya;
.sarousel ("Next"): Bingkai berikutnya
Gunakan atribut data untuk mengontrol korsel:
<! Doctype html> <html> <head> <title> Bootstrap Instance - Metode plug -in carousel </iteme> <link href = "http://libs.baidu.com/boottrap/3.0.3/css/boottrap.min.css" rel = "stylesheet"> src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap data-wrap="true" data-interval="1000"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0" > </li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" Data-slide-to = "2"> </li> </l> <!-Proyek Carousel-> <viv> <veT> <img src = "/wp-content/unggah/2014/07/slide1.png"> </Div> <v> <img src = "/wp-content/unggahan/2014 src = "/wp-content/unggah/2014/07/slide3.png"> </div> </div> <!-navigasi carousel-> <a href = "#mycarousel" data-slide =-prev "> ‹</a> <a href ="#mycare-slide "data-slide ="/a> <a href = "#mycar-slide" Data-slide = "/a> style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div> </div> </body> </html>
Metode deklaratif diimplementasikan dengan mendefinisikan atribut data, yang dapat dengan mudah mengontrol posisi korsel. Ini terutama termasuk jenis berikut:
1. Properti Data-Ride: Ambil nilai korsel dan tentukan di Carousel.
2. Properti Target Data: Ambil nama ID atau pengidentifikasi gaya lain yang ditentukan oleh Nilai Carousel. Seperti yang ditunjukkan pada contoh sebelumnya, ambil nilai sebagai "#slidershow" dan tentukan pada setiap li dari konter carousel.
3. Data-Slide Atribut: Nilai-nilai termasuk PREV, Next, Prev berarti menggulir ke belakang, dan selanjutnya berarti menggulir ke depan. Nilai properti ini juga didefinisikan pada tautan A carousel controller, dan nilai pengontrol HREF diatur ke nama ID atau pengidentifikasi gaya lain dari Container 4. Carousel.
5. Data-Slide-Atribut: Digunakan untuk lulus subskrip dari bingkai tertentu, seperti data-slide-ke = "2", yang dapat secara langsung diarahkan ke bingkai yang ditentukan ini (subskrip dimulai dari 0), dan juga ditentukan pada setiap LI dari konter carousel.
Di sini Anda perlu mencatat bahwa Anda dapat menambahkan gaya slide ke lapisan #slidershow, dan menggunakan efek switching gambar dan gambar agar halus.
<div id = "slidershow" data-ride = "carousel"> ... </div>
Selain data-ride = "carousel", data-slide, dan data-slide-ke, komponen carousel juga mendukung tiga properti khusus lainnya:
Kode berikut ini mengimplementasikan "Carousel tidak terus -menerus" dan "interval waktu korsel adalah 1 detik".
<div id = "slidershow" data-ride = "carousel" data-wrap = "false" data-interval = "1000"> .... </div>
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 Tabel Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Berbagi topik yang indah: gambar jQuery carousel javascript gambar carousel bootstrap carousel
Di atas adalah pengantar rinci untuk JavaScript Picture Carousel. Saya harap artikel ini akan membantu semua orang dalam mempelajari pemrograman JavaScript.