1. Prinsip Implementasi
(1) Tempatkan semua gambar di div kontainer induk, dan atur penampilan dan persembunyian gambar melalui atribut tampilan;
(2) Diagram korsel dibagi menjadi korsel manual dan korsel otomatis;
Fokus carousel manual adalah untuk mengklik lingkaran kecil di bawah gambar setiap kali Anda mengkliknya, mendapatkan nomor indeksnya, dan biarkan gambar dengan nomor indeks yang sesuai ditampilkan, dan lingkaran kecil pada saat ini disorot;
Carousel Otomatis: Gunakan timer setInterval () untuk memainkan gambar setiap waktu.
(3) Semua Pengetahuan Dasar: Operasi DOM, Timer, Aplikasi Acara.
2. Tata letak halaman gambar carousel:
<Div ID = "Content"> <!-Total Parent Container-> <div> <!-Container yang berisi gambar-> <div> <img src = "./ img/lunbo1.jpg"> </div> <v> <img src = ". src = "./ img/lunbo3.jpg"> </div> <!-Lingkaran indikasi di bawah gambar-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <! " href = "#"> <span>> </span> </a> </div>
3. CSS Gaya diagram Carousel:
#content {lebar: 100%; tinggi: 500px; posisi: relatif;}. Carousel-inner {position: relatif; lebar: 100%; overflow: tersembunyi; Tinggi: 500px; } .carousel-inner> .item> img {display: block; Line-Height: 1; z-index: 1;}. Carousel-indikator {Posisi: absolute; bawah: 10px; kiri: 45%; z-index: 2; Daftar-gaya-tipe: tidak ada;}. Carousel-indikator Li {display: inline-block; padding: 0 15px; font-SIZE: 24PX;#99999999999999999999 Kursor: pointer; z-index: 2;}. Active1 {font-size: 28px; warna: #fff;}. Carousel-Control {Posisi: Absolute; Teks-Dekorasi: Tidak Ada; Warna: #999; Font-Weight: Bold; Opacity: .5; Font-Size: 40px; Z-Index: Bold; Opacity: .5; Font-Size: 40px; Z-Index: Bold; Opacity: .5; Font-Size: 40PXx; Z-Index: Bold; Opacity: .5; Font-Size: 40pxx; Z-index: Bold; 3;}. Carousel-Control: Hover {Color: fff; Text-Decoration: None; Opacity: .9; outline: none; font-size: 42px;}. Prev {top: 30%; Kiri: 20px; } .next {top: 30%; kanan: 20px;}4. Kode Implementasi JS untuk Diagram Carousel:
window.onload = function () {// inisialisasi carousel var lunbo = document.geteLementById ('content'); var imgs = lunbo.geteLementsbyTagname ('img'); var uls = lunbo.getElementsbytagname ('ul'); var lis = lunbo.geteLementsbyTagname ('li'); // Dalam keadaan awal, sebuah lingkaran ada dalam mode highlight lis [0] .style.fontsize = '26px'; lis [0] .style.color ='fffff '; pic_index = 1; // Carousel otomatis. Gunakan PIC_TIME untuk merekam pemutaran, Anda dapat menggunakan ClearInterVal () untuk menghapusnya kapan saja. var pic_time = setInterval (autobofang, 3000); // manual carousel untuk (var i = 0; i <lis.length; i ++) {lis [i] .addeventListener ("mouseOver", target var = false);} event (event) {var event = event || window. var anak -anak = target.parentnode.Children; untuk (var i = 0; i <children.length; i ++) {if (target == anak -anak [i]) {picchange (i); }}} // Fungsi switching gambar picchange (i) {// Biarkan semua gambar tidak ditampilkan, dan semua lingkaran dalam gaya normal untuk (var j = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'none'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '#999';} // Biarkan gambar indeks yang dipilih ditampilkan, dan lingkaran yang sesuai disorot IMGS [i] .style.display = 'blok'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Autoplay Fungsi pemrosesan acara autobofang () {if (pic_index> = lis.length) {pic_index = 0;} change1 (pic_index); pic_index ++;} // peristiwa dalam konversi picu playback function secara otomatis ke dalam fungsi playback otomatis (indeks) {picchange (index); // ULS [0] .addeventListener ("mouseover", jeda, false); // mouse memindahkan tag UL, secara otomatis memainkan gambar berlanjut ULS [0] .addeventListener ("mouseout", go, false);} // auto memainkan fungsi jeda fungsi jeda (event) {var event = event = event || target = event.target || event.srcelement; switch (target.id) {case "pic1": clearInterval (pic_time); break; case "pic2": clearInterval (pic_time); break; case "pic3": clearInterval (pic_time); break;}} // auto play gambar function lanjutan go (event) {var event = event || window.event; var target = event.target || event.srcelement; switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (autobofang, 3000); break; case "pic2": pic_index = 2; pic_time = setInterval (autobofang, 3000); break; case "pic3": pic_index = 3; pic_time = setInterval (autobofang, 3000); break;}}}5. Gambar Reproduksi:
6. Masalah dan kekurangan yang dihadapi
Masalah: Ketika mouse pindah ke tag UL untuk pertama kalinya, gambar carousel otomatis berhenti, mouse bergerak keluar, dan carousel otomatis berlanjut, tetapi saat operasinya berjalan, gambar carousel berubah lebih cepat dan lebih cepat, dan mengklik tag UL pada saat ini tidak lagi berfungsi.
Penyebab masalah: Ketika timer digunakan lagi setelah menghentikan korsel, nilainya tidak ditugaskan ke PIC_TIME untuk merekam, sehingga mouse tidak dipindahkan ke tag UL lagi untuk membersihkan timer. Oleh karena itu, mengklik tag UL lagi tidak dapat menghentikan pemutaran carousel otomatis, dan kecepatannya semakin cepat dan lebih cepat.
Ketidakcukupan: Efek dari no-real-gulir seperti bagan carousel Taobao belum tercapai, dan efek indikator panah kiri dan kanan belum selesai. Ini akan terus dipelajari di tahap selanjutnya, meningkatkan dan berbagi.