Efek carousel gambar dapat dilihat di web, dan banyak orang juga menyebutnya tayangan slide. Efek utama dari tampilan adalah memainkan beberapa gambar dalam satu siklus, bermain dari kanan ke kiri. Bermain itu akan berhenti ketika mouse melayang di atas gambar. Jika mouse melayang di atas atau mengklik titik di sudut kanan bawah, gambar yang sesuai akan ditampilkan.
Efek carousel gambar ini diimplementasikan dalam kerangka bootstrap melalui plug-in carousel
Tangkapan layar efek demo:
Kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <!-<tautan rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/boottrap/3.0/csss/cssss/bootstrap.min.cssspss"> "linkes"> " href = "css/bootstrap.min.css"/> <tyle> body {padding: 10px; margin: 10px;} </tyle> </head> <body> <div id = "mycarousel"> <!-Langkah 1: Desain wadah untuk gambar korsel. -> <!-#slidershow layer menambahkan gaya slide, dan menggunakan gambar dan gambar untuk beralih efek agar halus-> <ol> <!-Langkah 2: Desain penghitung gambar korsel. -> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> <Li Data-target = "#MyCarousel" Slide-To = "2"> </Li> </ol> </ol> <play-slide-slide-to = "2"> </Li> </ol> </ol> <play-slide "slide-to =" 2 "> </Li> </ol> </ol> <play-slide" slide-to = "2"> </Li> </ol> </ol> sl-slide-slide-to = "2"> </Li> </ol> </oL> </oLD DIV: Langkah DATA 3 " CARousel-Inner Style to Control-> <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <vif> <h4> Judul 1 </h4> <p> Gambar 1 </P> </div> <v> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <hv> <h4> Judul 2/H4> <p> Gambar 2 </p> </div> <ver> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <hv> <h4> Judul 2/H4> <p> Gambar 2 </p> </div> <ver> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <hv> <h4> Judul tiga </h4> <p> Pengantar konten gambar tiga karel. Mainkan carousel-control kiri ke depan dan controller yang diputar ke belakang-> <a href = "#mycarousel" data-slide = "prev"> ‹<!-<a href = "#slidershow" role = "tombol" data-slide = "prev">-> <span> </span> </a> <it a href = "prev">-> <span> </span> </a> <href = "href =" Data-slide = "Next"> ›<span> </span> <!-<a href ="#carousel-example-generic "data-slide =" prev "> <span> </span> </a> <a href ="#carousel-example-generic " Data-slide = "Next"> <span> </span> </a>-> </div> <script> $ ('. carousel'). carousel () </script> <script type = "text/javascript" src = "js/jquery.min.js"> </script> <script type = "javascript" src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html> /*boottrap.css File Baris 5835 ke baris 5863*/. CAROUSTRAP /*Penentuan posisi absolut dari seluruh area penghitungan*/bawah: 10px; /*10px dari bagian bawah wadah carousel*/z-index: 15; /*Set its level on the Z axis*//*Center the entire counting area at the level*/left: 50%;width: 60%;padding-left: 0;margin-left: -30%;text-align: center;list-style: none;}.carousel-indicators li {display: inline-block;width: 10px;height: 10px;margin: 1px;text-indent: -999px;cursor: pointer;background-color: #000 /9;background-color: rgba(0, 0, 0, 0);border: 1px solid #fff;border-radius: 10px;}/*Set the current state style*/.carousel-indicators .active {width: 12px;height: 12px;margin: 0;background-color: #ffff;}Gambar korsel-bermain carousel sentuh deklaratif
Ada dua cara untuk memicu diagram carousel, satu deklaratif, dan yang lainnya adalah JavaScript. Pertama, mari kita lihat metode deklaratif.
Metode deklaratif diimplementasikan dengan mendefinisikan atribut data, yang dapat dengan mudah mengontrol posisi korsel. Ini terutama termasuk jenis berikut:
• Properti Ride Data: Ambil nilai korsel dan tentukan di Carousel.
• Properti Target Data: Ambil nama ID atau pengidentifikasi gaya lain yang ditentukan oleh Nilai Carousel. Seperti yang ditunjukkan pada contoh sebelumnya, ambil nilai "#slidershow" dan tentukan pada setiap li dari konter korsel.
• Atribut Data-Slide: Nilai-nilai termasuk PREV, Next, Prev berarti menggulir ke belakang, dan berikutnya 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 lainnya dari container carousel.
• Atribut Data-Slide-To: Digunakan untuk lulus subskrip dari frame tertentu, seperti data-slide-to = "2", yang dapat secara langsung diarahkan ke bingkai yang ditentukan ini (subskrip dimulai dari 0), dan juga ditentukan pada setiap LI dari penghitung karar.
Selain data-ride = "carousel", data-slide, dan data-slide-ke, komponen carousel juga mendukung tiga properti khusus lainnya:
| Nama atribut | jenis | nilai default | menggambarkan |
| Interval data | nomor | 5000 | Waktu tunggu (milidetik) untuk rotasi geser. Jika salah, korsel tidak akan memulai loop secara otomatis |
| jeda data | rangkaian | melayang | Mouse default ditangguhkan di area slide dan pemutaran akan dimulai saat pergi. |
| data-wrap | Nilai Boolean | BENAR | Adalah loop kontinu korsel |
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>
Tiga atribut di atas dapat didefinisikan pada elemen kontainer atau pada pengidentifikasi (atau tautan kontrol kiri dan kanan), tetapi definisi terakhir memiliki prioritas yang lebih tinggi.
Gambar korsel-metode pemicu javascript
Tiga pernyataan data-ride = "carousel" dan data-slide = "prev" dan data-slide = "next" telah dihapus. Mari kita gunakan kode JS untuk mengimplementasikan fungsi "carousel gambar otomatis" dan "tombol maju dan mundur".
Gunakan JS untuk mengimplementasikan fungsi "carousel gambar otomatis" dan "tombol maju dan mundur"
Secara default, jika atribut data-ride = "carousel" didefinisikan pada wadah carousel, efek switching gambar carousel akan secara otomatis dimuat setelah halaman dimuat. Jika atribut Data-Ride tidak ditentukan, switching gambar carousel dapat dipicu melalui metode JavaScript. Metode penggunaan spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
$ (". Carousel"). Carousel ();
Anda juga dapat menentukannya dengan ID kontainer:
Salinan kode adalah sebagai berikut:
$ ("#Slidershow"). Carousel ();
Parameter spesifik dapat diatur dalam metode carousel (), seperti:
| Nama atribut | jenis | nilai default | menggambarkan |
| selang | nomor | 5000 | Waktu tunggu (milidetik) untuk rotasi geser. Jika salah, korsel tidak akan memulai loop secara otomatis |
| berhenti sebentar | rangkaian | melayang | Mouse default ditangguhkan di area slide dan pemutaran akan dimulai saat pergi. |
| membungkus | Nilai Boolean | BENAR | Adalah loop kontinu korsel |
Saat menggunakannya, Anda dapat melewati parameter status yang relevan saat menginisialisasi plug-in, seperti:
$ ("#slidershow"). Carousel ({interval: 3000});Bahkan, ketika kami mengkonfigurasi parameter untuk metode carousel (), efek carousel dapat secara otomatis dialihkan. Namun, carousel plug-in dalam kerangka bootstrap juga memberi pengguna beberapa metode panggilan khusus, sebagai berikut:
• .karousel ("siklus"): bermain dari kiri ke kanan;
• .karousel ("jeda"): berhenti pemutaran loop;
• .carousel ("angka"): Loop ke bingkai yang ditentukan, subskrip dimulai dari 0, mirip dengan array;
• .Carousel ("Prev"): Kembali ke bingkai sebelumnya;
• .Carousel ("NEXT"): Bingkai berikutnya
Misalnya, metode panggilan sebelumnya, tombol maju dan belakang tidak dapat berfungsi dengan baik. Faktanya, mereka dapat digunakan untuk bekerja secara normal melalui metode .karousel ("prev") dan .bara ("selanjutnya"). Kodenya adalah sebagai berikut:
$ (function () {$ ("#slidershow"). carousel ({interval: 2000}); $ ("#slidershow a.left"). klik (function () {$ (". Carousel"). Carousel ("prev");}); $ ("#slidershow A.Right "). Klik (function () {$ (". Carousel "). Carousel (" Next ");});}); <! Doctype html> <html> <head> <meta charset = "utf-8"> <tautan rel = "stylesheet" href = "http://maxcdn.boottrapcdn.com/bootstrap/3.0/csss/boottrap 10px;} </tyle> </head> <dig body> <v id = "carousel-example" data-ride = "carousel"> <!-indikator-> <ol> <li data-target = "#carousel-example" data-slide-to = "0"> </li> <li> <Li-target = "#carousel-slide-example" Li-over "</li-target =" Li-carous-slide "Li- li- excample" Data-target = "#carousel-example" data-slide-to = "1"> </li> <li data-target = "#carousel-example" data-slide-to = "1"> </li> <Li Data-target = "#carousel-example" slide-to = "2"> </li> </ol> <!-carousel "slide-to =" 2 "> </li> </ol> <! src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" /><div>...</div></div><div><img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" /><div>...</div></div><div><img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" /><div>...</div> </div>< !-- control-> <a href = "#carousel-example" Data-Slide "<a href ="#carousel-example "Data-Slide" "DATA" " href = "#carousel-example" data-slide = "next"> <span> </span> </a> </div> <!-<script> $ (function () {$ ('. carousel'). carousel ();}); </scrip>-> <script src = "js/jquery.min.min.min.min.min.min.min.min.min.min.min.min.mins. src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.boottrappcdn.com/boottrap/3.2.0/js/boottrap.min.js"> </script>-> </body> </html>Wulin.com merekomendasikan topik terkait bootstrap:
Keterampilan operasi komponen bootstrap
Ringkasan Pengetahuan Terkait Bootstrap
Di atas adalah penjelasan terperinci tentang contoh penggunaan diagram rotasi korsel bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!