Diagram korsel masih relatif umum dalam aplikasi masa depan dan dapat diimplementasikan tanpa banyak kode. Tetapi jika Anda hanya menguasai pengetahuan dasar JS, bagaimana Anda bisa menggunakan metode logis yang lebih sedikit dan sederhana untuk mencapainya? Berikut beberapa praktik yang berbeda:
1. Gunakan metode perpindahan untuk mencapai
Pertama, kita dapat menambahkan div ke tubuh dan mengatur lebar ke persentase (halaman adaptif). Jika proporsinya spesifik untuk persentasenanya relatif, kami akan melakukannya sesuai dengan kebutuhan. Saya tidak akan banyak bicara di sini. Masukkan gambar ke dalam div.
Kedua, bagian gaya mengatur semua tag IMG menjadi mutlak untuk memfasilitasi penentuan posisi
Akhirnya, bagian JS berbicara tentang logika, mendefinisikan dua array kosong. Array pertama digunakan untuk menyimpan gambar awal yang ditampilkan pada halaman dan gambar menunggu untuk masuk, dan array kedua menyimpan gambar N yang tersisa. Asumsikan bahwa kedua array ini diatur ke: Waittoshow = []; dan Goout = []; waittoshow.shift (); Jika gambar pertama bernama ShowFirst, dan waktu perpindahan dan pergerakan ditetapkan untuk gambar Showfirst. Setelah eksekusi selesai, masukkan showfirst ke ekor goout: goout.push (showfirst); Pada saat ini, elemen ke -0 dari array Waittoshow menjadi gambar kedua asli yang akan ditampilkan. Atur waktu perpindahan dan pergerakan untuk gambar ini Waittoshow [0], dan pop gambar elemen pertama dari array Goout dan masukkan ke dalam ekor array Waittoshow untuk memastikan bahwa array Waittoshow selalu merupakan gambar yang ditampilkan dan gambar yang akan ditampilkan. Dengan cara ini, kedua array membentuk loop untuk menyelesaikan implementasi gambar carousel. Logika terbalik adalah sama (karena logikanya terlalu rumit, tidak disarankan di sini)
2. Metode menggunakan tingkat hierarki untuk mengubah gambar teratas (metode ini tidak memiliki tindakan perpindahan, tetapi logikanya sangat sederhana dan praktis)
Lebih intuitif untuk kode langsung: pada dasarnya setiap baris memiliki komentar
<!DOCTYPE html><html><head><meta charset="utf-8"><title>carousel diagram (flash adaptive)</title><style media="screen">* {margin: 0;padding: 0;}.wrap {width: 60%;background: red;margin: auto;position: relative;}.wrap img {width: 100%;position: absolute;/*z-index: 10;*/} input {border: 1px solid lightgray; lebar: 50px; tinggi: 30px; latar belakang: merah; border-radius: 5px; font-size: 20px;} </style> </head> <body> <v> <img src = "iMg/01.jg" </head "<body> <v> <img src =" iMg/01.jg "</head" <body> <v> <img src = "iMg/01.jg" SR "<body> <v> <img src =" IMG/01.JG " /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <input type = "tombol" id = "butleft" name = "name" name = "◀︎"> <input type = "Tombol" id = "butright" name "name =" name = OR "ork type = "text/javascript"> // Dapatkan elemen gambar untuk menghasilkan array string. Array string tidak dapat melakukan splice push pop atau operasi lain // sehingga perlu mengembalikan nilainya ke dalam array, dengan definisi setelah itu var gambar = document.getElementsbyTagname ('img'); var butleft = document.geteLementById ('butleft'); var butright = document.getElementById ('butright'); 1000; // Dapatkan array kosong untuk menyimpan elemen string dalam gambar var gambar = []; // untuk loop digunakan untuk menetapkan nilai ke array imagess dan mengubah tingkat elemen dalam array untuk (var i = 0; i <gambar.length; i ++) {imagess [i] = gambar [i]; var arus arus = imagess [i]; mereka. The higher the image is, the higher the level setting, so -i, so that the images will be from the first and second pictures in order... downwards in sequence currentImage.style.zIndex = -i;}// Set the counter count, perform a click event (left or right) count plus 1var count = 0;// The click event to the left butLeft.onclick = function() {// Pop up an image element from the head of the array var showFirst = imagess.shift (); // Tetapkan level untuk elemen gambar yang muncul, yaitu, -1000 + count, // Jadikan level terkecil dibandingkan dengan elemen lain, gambar muncul di kepala array akan ditampilkan di bagian bawah tayangan, dorongan ke level. add 1, do not consider the specific value, just click event plus 1 count++;}// Click the event to the right butRight.onclick = function() {// Pop up an element from the tail of images and assign it to showFirstvar showFirst = imagess.pop();// Set the level of showFirst to the maximum, 1000+count, so it will be displayed on the first layer showfirst.style.zindex = index+count; // Setelah level berubah, masukkan ke kepala array imagess images.unshift (showfirst); // klik sekali untuk menambahkan 1count ++;} </script> </html>Artikel yang harus dibaca di atas tentang JS dasar (implementasi sederhana dari carousel Acara Klik) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.