Di tim, tiba -tiba saya ditanya bagaimana menerapkan gambar korsel. Saya telah berada di bidang front-end selama lebih dari setahun, tetapi saya sudah lama tidak menulisnya sendiri. Saya selalu menggunakan plug-in untuk menulisnya di Daniu. Hari ini saya akan menulis tutorial sederhana yang cocok untuk dipelajari oleh pemula. Tentu saja, ada banyak prinsip implementasi dan pola desain diagram carousel. Apa yang saya bicarakan di sini adalah mengimplementasikannya menggunakan pemrograman fungsional yang berorientasi pada proses. Dibandingkan dengan pola desain yang berorientasi objek, kode ini pasti akan tampak kembung dan berlebihan. Tetapi kurangnya abstraksi yang berorientasi objek sangat cocok untuk dipahami dan dipelajari pemula. Siswa yang sudah dalam kelelawar berharap untuk menyemprotkan lebih sedikit. Anda juga dapat memberikan lebih banyak saran.
Prinsip Diagram Carousel:
Serangkaian gambar dengan ukuran yang sama adalah ubin, menggunakan tata letak CSS untuk menampilkan hanya satu gambar, dan sisanya tersembunyi. Pemutaran otomatis dicapai dengan menghitung offset menggunakan timer, atau mengganti gambar dengan mengklik secara manual pada acara.
Tata letak html
Pertama, wadah wadah induk menyimpan semua konten, dan daftar wadah anak berisi gambar. Tombol Subcontainer Tempat Tombol Tombol.
<Div id = "container"> <Div id = "list" style = "left: -600px;"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/<img src = "Img/2.g"/2.jpg "/<img src =" IMG/2. JG " /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div id = "tombol"> <span = "1"> </span> <span> <span index = "2"> </span> span = "3"> </span> <span> index = "2"> </span> span = "3" <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "prev"> <</a> <a href = "javascript :;" ID = "NEXT" >> </a> </div>
Optimalkan, pengguliran mulus.
Saat Anda beralih dari gambar terakhir ke gambar pertama, ada celah besar, dan gunakan dua gambar tambahan untuk mengisi celah ini.
Berikut adalah pengguliran yang mulus, lihat kode secara langsung, salin gambar terakhir sebelum menempatkan gambar pertama, dan salin gambar pertama di belakang gambar terakhir. Dan, sembunyikan gambar bantu gambar pertama (sebenarnya gambar kelima sebenarnya ditampilkan, jadi set style = "kiri: -600px;")
Modifikasi CSS
1. Model kotak pemahaman, aliran dokumen, dan masalah penentuan posisi absolut.
2. Perhatikan luapan: tersembunyi dari daftar; Hanya menampilkan gambar jendela dan menyembunyikan sisi kiri dan kanan.
3. Pastikan setiap lapisan bentang di tombol di atasnya dan atur ke paling atas. (Z-index: 999)
* {margin: 0;padding: 0;text-decoration: none;}body {padding: 20px;}#container {width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative;}#list {width: 4200px;height: 400px;position: absolute;z-index: 1;}#list img {width: 600px;height: 400px;float: left;}#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;}#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333; margin-kanan: 5px;} #tombol .on {latar belakang: latar belakang;}. Panah {kursor: pointer; tampilan: tidak ada; garis-tinggi: 39px; teks-align: center; font-ukuran: 36px; font-weight: bold; lebar: 40px; tinggi: 40px: 40px; Rgba (0, 0, 0, .3); warna: #fff;}. Panah: hover {latar belakang-warna: rgba (0, 0, 0, .7);}#wadah: hover .arrow {display: block;}#prev {kiri: 20px;}#selanjutnya {kanan: 20px;}JS
Pertama, pertama -tama kita menyadari efek mengklik secara manual panah kiri dan kanan untuk mengganti gambar:
window.onload = function () {var list = document.geteLementById ('list'); var prev = document.geteLementById ('prev'); var next = document.geteLementById ('next'); function animate (offset) {// yang diperoleh adalah gaya. untuk dibulatkan dengan parseint () untuk mengubahnya menjadi angka. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px';} prev.onClick = function () {animate (600);} next.onClick = function () {animate (-600);}}Setelah berjalan, kami akan menemukan bahwa jika Anda terus mengklik panah yang tepat, akan ada yang kosong, dan Anda tidak dapat kembali ke gambar pertama. Klik panah kiri untuk kembali ke gambar pertama.
Menggunakan Google Chrome F12, alasannya adalah kami menggunakan offset kiri untuk mendapatkan gambar. Ketika kita melihat bahwa nilai kiri kurang dari 3600, akan ada kosong jika tidak ada gambar ke -8, jadi kita perlu membuat penilaian pada offset di sini.
Tambahkan paragraf ini ke fungsi Animate:
if (newleft <-3000) {list.style.left = -600 + 'px';} if (newleft> -600) {list.style.left = -3000 + 'px';}Oke, jalankan, tidak masalah. Gambar korsel, seperti namanya, adalah gambar yang bisa Anda pindahkan. Pada saat ini, kita perlu menggunakan pengatur waktu objek bawaan browser.
Untuk timer, perlu menjelaskan perbedaan antara setInterval () dan setTimeout. Sederhananya, setInterval () dieksekusi beberapa kali, dan setTimeout () dieksekusi hanya sekali.
Untuk penggunaan yang lebih spesifik, Anda dapat mengklik tautan untuk melihat perbedaan: window.setInterval window.setTimeout.
Di sini kami menggunakan setInterval () karena gambar kami perlu digulir. Masukkan di bawah
var timer; function play () {timer = setInterval (function () {prev.onClick ()}, 1500)} play ();Jalankan, oke!
Namun, ketika kita ingin melihat dengan cermat gambar tertentu, kita perlu menghentikan gambar dan kita bisa menghapus timer. Metode ini digunakan di sini.
Di sini, kita perlu beroperasi di DOM -nya dan perlu mendapatkan seluruh area peta korsel;
var container = document.geteLementById ('container'); function stop () {clearInterval (timer);} container.onmouseover = stop; container.onmouseout = play;Tapi di sini, gambar korsel pada dasarnya telah selesai, dan beberapa siswa akan bertanya, jadi sangat sederhana. Apakah Anda melihat deretan titik -titik kecil di bawah gambar? Saya telah menambahkan fitur untuk Anda.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Ini versi yang ditingkatkan:
var buttons = document.geteLementById ('tombol'). getElementsbyTagname ('span'); var index = 1; function buttonsshow () {// gaya sebelumnya perlu dibersihkan untuk (var i = 0; i <buttons.length; i ++) {if (i] .classname == 'on') {if (i] .className == 'on') {if (i] .classname = Array dimulai dari 0, jadi indeks kebutuhan -1buttons [indeks -1] .className = 'on';} prev.onClick = function () {index -= 1; if (index <1) {index = 5;} tombolshow (); animate (600);} next.onClick = function () {// karena efek dari efeknya (600); the next.onClick = function () {// karena efeknya of the of the powl Kami hanya memiliki 5 titik kecil, jadi kami perlu membuat indeks penilaian += 1; if (index> 5) {index = 1;} tombolshow (); animate (-600);}Tampaknya jauh lebih normal sekarang, tetapi kami ingin mengklik salah satu titik kecil kapan saja dengan mouse dan beralih ke gambar yang sesuai. Prinsip yang sama adalah, kita masih perlu menemukan gambar yang sesuai melalui offset.
untuk (var i = 0; i <tombol if (this.className == "on") {return;}/* offset Get: Di sini Anda mendapatkan posisi di mana mouse bergerak ke titik, gunakan ini untuk mengikat indeks ke tombol objek [i], buka Google penggunaan ini* // karena indeks di sini adalah atribut kustom, Anda perlu menggunakan metode level dom2 get-levele () untuk getSEx () untuk getTribute () ke custom* custom indery/Anda perlu menggunakan metode level dOM2 getTEx () ke getS = parseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); animate (offset); // penyimpanan posisi setelah klik mouse, dan gunakan untuk menampilkan titik sebagai indeks normal = clickIndex; tombolshow ();}}Semua orang, Anda mungkin telah menemukan bahwa gambar korsel ini agak aneh dan tidak dapat diprediksi. Itu beralih ke kiri, jadi tulis ulang:
function play () {// soket gambar carousel untuk beralih gambar ke timer kanan = setInterval (function () {next.onClick ();}, 2000)} <! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <head-d-dding = "TEXT/TEKS/TEKS/TEPPS/UTF-8"> <title> </title> <type head = "TECT/TEKS/TEKS/TEKPS/UTF-8"> </title> </title> </typs = "TECT/TECPS/TECPS/COSSE" ... tidak ada;} body {padding: 20px;}#container {width: 600px; tinggi: 400px; border: 3px solid#333; overflow: tersembunyi; posisi: relatif;}#list {width: 4200px; tinggi: 400px; posisi: absolute; z-index: 1;}: 600px; list: 400px; position: absolute; z-index: 1; left;}#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;}#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}#buttons .on {latar belakang: jeruk;}. Panah {kursor: pointer; display: none; garis-line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; tinggi: 40px; posisi: absolute; z-indeks: 2; Top: 180px: latar belakang 0px; Posisi: absolute; z-indeks: 2; top: 180px: latar belakang 0px; #fff;}. Panah: hover {latar belakang-color: rgba (0, 0, 0, .7);}#container: hover .arrow {display: block;}#prev {left: 20px;}#next {right: 20px;} </style> <script type = "teks/javascript">/{right: 20px; timer*/window.onload = function () {var container = document.geteLementById ('container'); var list = document.getElementById ('list'); var buttons = document.geteLementById ('tombol'). var var '; var var'); var var '); var var' document. timer; function animate (offset) {// Apa yang diperoleh adalah style. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px'; // penilaian scrolling tak terbatas if (newleft> -600) {list.style.Left = -3000 + 'px';} if (newleft <-3000) {list. play () {// timer eksekusi berulang = setInterval (function () {next.onClick ();}, 2000)} function stop () {clearInterval (timer);} function Buttonsshow () {// hapus gaya dari titik kecil sebelumnya untuk (var i = 0; i <tombol. {Tombol [i] .className = "";}} // Array dimulai dari 0, jadi indeks membutuhkan -1buttons [indeks -1] .className = "on";} prev.onclick = function () {index -= 1; if (1) {index = 5} kancing (); animasi (600); {index) {index = 5} kancing (); animasi (600); {index) {index = 5} kancing (); animasi (600); {index) {index = 5} kancing (); animasi (600); {index) {index = 5} kancing (); animasi (600); {next) {next; {next; {next; {ner. dari timer di atas, indeks akan terus meningkat. Kami hanya memiliki 5 titik kecil, jadi kami perlu membuat indeks penilaian+= 1; if (index> 5) {index = 1} animate (-600); tombolshow ();}; untuk (var i = 0; i <tombol if (this.className == "on") {return;}/* Di sini kita mendapatkan posisi di mana mouse bergerak ke titik, gunakan ini untuk mengikat indeks ke tombol objek [i], buka Google Penggunaan ini* //* Karena indeks di sini adalah atribut kustom, Anda perlu menggunakan Metode Level Custor/Klikex untuk mendapatkan Atribut Kustom* untuk mendapatkan Atribut Kustom* untuk mendapatkan Atribut Kustom* untuk mendapatkan Atribut Kustom, Anda perlu mendapatkan Atribut Kustom, Klikex untuk mendapatkan Atribut Kustom, Anda perlu mendapatkan Atribut Kustom. parseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); // Indeks ini adalah indexAnimate (offset); indeks = clickIndex; // Menyimpan posisi setelah klik mouse, dan gunakan untuk menampilkan DotsShow ();}} container.onmouseover = stop; container.onmouseout = play; play ();} </script> </head> <bod> <v id = "container"> <div id = "list" style = "kiri: -600px;"> <"IMG/IMG/IMG =" List "style =" kiri: -600px; "> <" iMg; src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <mg src = "iMg/5.jpg"/<img src = "iMg =" iMg/5.jpg "/<mg Src =" src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/</divg "/<ponpon =" "iMg/1.jpg"/</div> </div iD = " index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "prev"> </a> <a href = "javascript :;" id = "NEXT" >> </a> </div> </body> </html>Di atas adalah kode carousel JS sederhana 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!