Saya telah menulis tiga korsel gambar sendiri. Salah satunya diimplementasikan dalam JS asli sederhana dan tidak memiliki efek animasi. Yang lain diimplementasikan dalam kombinasi dengan jQuery dan dialihkan masuk dan keluar. Sekarang saya ingin membuat yang lebih keren di blog atau situs web pribadi saya, dan saya dapat menampilkan karya saya sendiri pada waktu itu. Setelah beberapa saat berbelanja di MOOC, saya menemukan bahwa ada kursus plug-in carousel jQuery, yang agak keren, jadi saya berpikir untuk merangkumnya di JS asli. Hanya setelah melakukannya, itu tidak semudah yang saya kira. . . Jangan bicarakan lagi, mari kita jelaskan proses implementasi.
2. Efek
Karena server saya belum diinstal. Tidak ada demonstrasi online (orz ...), jadi saya hanya bisa melakukan rendering.
Efek perkiraan masih dapat dilihat dari gambar, jadi saya tidak akan banyak bicara. Jika Anda ingin melihat efek kode nyata, selamat datang di kode unduhan github saya. Jangan lupa memberi saya bintang dalam proyek github saya^_^
AKU AKU AKU. Proses implementasi
Struktur HTML
<div data-setting='{"width":1000,"height":400, "carrouselWidth":750, "carrouselHeight":400, "scale":0.9, "verticalAlign":"middle"}'> <div></div> <ul> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg" </a> </li> <li> <a href = "#"> </a> </li> <li> <a href = "#"> </rc = " <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </ul> <div> </div> </divg "Struktur ini sama dengan struktur kode HTML dari korsel umum. Sedikit perbedaan adalah bahwa ada properti penetapan data pada Carousel Div utama, yang berisi beberapa parameter efek korsel. Signifikansi spesifik dari parameter akan dijelaskan nanti.
Kode untuk bagian CSS tidak akan diposting. Yang paling penting adalah memperhatikan posisi absolut elemen. Seperti yang dapat dilihat dari rendering, posisi dan ukuran masing -masing gambar berbeda, jadi ini dikendalikan melalui JS, sehingga diperlukan penentuan posisi absolut. Mari kita fokus pada proses implementasi JS.
Proses implementasi JS
Mari kita bicara tentang beberapa langkah kunci di JS. Setelah melakukan langkah -langkah ini, seharusnya tidak ada kesulitan.
① Parameter Default
Karena ini adalah plug-in paket, pasti akan ada beberapa nilai default untuk parameter yang perlu dikonfigurasi. Di plugin ini, parameter berikut terutama:
Lebar: 1000, // Lebar area geser
Tinggi: 400, // ketinggian area slide
Carrouselwidth: 700, // Lebar bingkai pertama slide
Carrouselheight: 400, // Ketinggian bingkai pertama slide
Skala: 0,9, // Catat hubungan skala, misalnya, berapa banyak lebar dan tinggi gambar kedua lebih kecil dari gambar pertama saat ditampilkan.
AUTOPLAY: Benar, // Apakah itu dimainkan secara otomatis?
TimeSpan: 3000, // interval waktu bermain otomatis
Verticalalign: 'tengah' // perataan gambar, ada tiga cara: atas/tengah/bawah, default adalah tengah
②Capsulululate objek
Karena situs web dapat menggunakan plug-in carousel yang sama di beberapa tempat, pengemasan sangat penting. Setelah mendefinisikan objek ini, jika Anda mendefinisikan metode inisialisasi untuk objek, Anda dapat membuat banyak objek. Anda hanya perlu melewati DOM yang sama dari semua kelas di dalamnya. Jadi, metode inisialisasi saya adalah sebagai berikut:
Carousel.init = fungsi (carroousels) {var _this = this; // Konversi nodelist menjadi array var cals = toarray (carroousels); <br> /*Karena JS asli mendapatkan semua kelas, yang Anda dapatkan adalah nodelist, yang merupakan array kelas. Jika Anda ingin menggunakan metode array, Anda perlu mengubahnya menjadi array nyata. Di sini Toarray adalah metode konversi. */ cals.foreach (function (item, index, array) {new _this (item);}); }Dengan cara ini, ketika saya berada di window.onload, saya memanggil carroousel.init (document.queryselectorall ('. Carroousel-main')); Dengan cara ini saya dapat membuat banyak korsel!
③Initialized parameter posisi bingkai pertama
Karena parameter yang relevan dari semua frame setelah frame pertama didefinisikan dengan mengacu pada bingkai pertama, penting untuk menentukan frame pertama dengan sumur.
setValue: function () {this.carroousel.style.width = this.settings.width+'px'; this.carroousel.style.height = this.settings.height+'px'; /*Pengaturan tombol kiri dan kiri, di sini, area setelah tombol kiri dan kanan dikurangi dari lebar bingkai pertama. Z-index lebih tinggi dari semua gambar kecuali bingkai pertama, dan gambar hanya ditempatkan kiri dan kanan, sehingga nilai z-index adalah setengah dari jumlah gambar. */ var btnw = (this.settings.width- this.settings.carroouselwidth)/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.height = this.settings.height+'px'; this.prebtn.style.zindex = math.ceil (this.carroouselitems.length/2); this.nextbtn.style.width = btnw+'px'; this.nextbtn.style.height = this.settings.height+'px'; this.nextbtn.style.zindex = math.ceil (this.carroouselitems.length/2); // Pengaturan Terkait Bingkai Pertama This.CarroRelFir.Style.Left = BTNW+'PX'; this.carroouselfir.style.top = this.setCarroouselalign (this.settings.carroouselheight)+'px'; this.carroouselfir.style.width = this.settings.carroouselwidth+'px'; this.carroouselfir.style.height = this.settings.carroouselheight+'px'; this.carroouselfir.style.zindex = math.floor (this.carroouselitems.length/2);},Di sini, ketika objek baru digunakan, buka node DOM untuk mendapatkan parameter pengaturan data dan kemudian perbarui konfigurasi parameter default. Ada tempat yang perlu diperhatikan di sini. Anda tidak dapat secara langsung memperbarui parameter default dengan menetapkan nilai saat mendapatkan parameter, karena ketika pengguna mengkonfigurasi parameter, semua parameter mungkin tidak dikonfigurasi sekali. Jika nilainya ditetapkan secara langsung dan pengguna kebetulan dikonfigurasi, parameter akan hilang. Di sini saya menulis metode ekstensi objek yang mirip dengan metode $ .Extend di jQuery untuk memperbarui parameter. Saya tidak akan mencantumkan detailnya, jika Anda tertarik, Anda dapat mengunduhnya.
④ Pengaturan Lokasi Gambar Lainnya
Gambar di sini sebenarnya adalah gambar kecuali yang pertama dibagi menjadi dua gambar kiri dan kanan, dan posisi gambar di sebelah kiri dan yang di sebelah kanan berbeda, sehingga perlu dikonfigurasi secara terpisah:
// Atur hubungan posisi gambar di sebelah kanan var rightIndex = level; rightslice.foreach (fungsi (item, indeks, array) {rightIndex--; var i = indeks; rw = rw*carroouselself.settings.scale; // gambar di sebelah kanan secara bertahap lebih kecil menurut skala rasio rh = rh*carrouselself.self. Z-index di sebelah kanan lebih kecil, dan jumlah gambar dapat dikurangi secara bertahap dengan menggunakan jumlah umum item.style.width = rw+'px'; Metode Perhitungan Kesenjangan Di sini adalah: Kurangi lebar bingkai pertama, bagi 2, dan kemudian membagi jumlah gambar di item kiri atau kanan. item.style.top = carroouselself.setCarroouselalign (rh)+'px';});Metode pengaturan di sebelah kiri serupa dan lebih sederhana, jadi saya tidak akan membahas detailnya.
⑤ Sesuaikan ukuran posisi semua gambar selama rotasi
Langkah ini sangat penting. Mengklik yang berikutnya pada tombol kanan adalah rotasi kiri, dan mengklik yang sebelumnya pada tombol kiri adalah rotasi kanan. Pada saat ini, kita hanya perlu menganggap semua gambar sebagai cincin, klik sekali, ubah posisi dan lengkapi rotasi. Khususnya ketika rotasi kiri diputar, buat parameter gambar kedua sama dengan gambar pertama, gambar ketiga sama dengan gambar kedua ... dan gambar terakhir sama dengan gambar pertama. Saat berputar kanan, buat parameter gambar pertama sama dengan gambar kedua, parameter gambar kedua sama dengan gambar ketiga ... dan parameter gambar terakhir sama dengan gambar pertama.
Mari kita bicara tentang rotasi kiri di sini
if (dir == 'left') {toarray (this.carroouselitems) .foreach (function (item, index, array) {var pre; if (index == 0) {// menilai apakah itu pre = _This.carrousellat; // simpan pra yang sama dengan pre -var light = pre.offset; varets; zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second Gambaran mengacu pada gambar pertama, dan gambaran pertama diubah, sehingga parameter yang relevan dari gambar pertama harus disimpan sementara waktu Item.Style.Left; function_this.rotateFlag = true;Rotasi di sini akan tampak kaku jika Anda tidak menggunakan beberapa animasi terlalu banyak. Tetapi JS asli tidak memiliki fungsi animasi, di sini saya menulis fungsi animasi yang ditiru sendiri. Prinsipnya adalah mendapatkan nilai gaya asli DOM dan membandingkannya dengan nilai yang baru dilewatkan. Gunakan beberapa metode untuk menentukan kecepatan. Kecepatan saya di sini adalah untuk membagi perbedaan 18. Namun, menentukan timer, dan merujuk pada interval waktu dalam kode sumber jQuery untuk mengeksekusi setiap 13 milidetik. Kemudian, timer jelas setiap kali nilai gaya asli ditambahkan ke nilai yang masuk. Untuk detailnya, silakan lihat di sini.
Oke, poin -poin utamanya hampir sama, dan seharusnya mudah jika Anda memahami proses ini!
4. Ringkasan dan refleksi
Meringkaskan:
Saya pribadi berpikir ini adalah plugin yang relatif mudah dipahami. Akan sangat mudah untuk melakukannya dalam kombinasi dengan jQuery. Namun, jika Anda menulis dari aslinya, Anda masih merasa sedikit kurang halus. Seharusnya animasi kustom tidak sebagus animasi yang dienkapsulasi oleh jQuery.
Juga, karena gambar perlu dibagi secara merata di kedua sisi sisi kiri dan kanan, bahkan untuk jumlah gambar, metode yang digunakan di sini adalah untuk mengkloning gambar pertama, kemudian menambahkannya ke ujung, dan membentuk angka ganjil.
memikirkan:
Jika ada bug, itu berarti bahwa saya mendefinisikan bendera RotateFlag untuk menentukan apakah itu dapat berputar saat ini, yaitu untuk mencegah Anda mengikuti klik cepat. Ketika saya menekan, saya mengatur RotateFlag ke False, dan kemudian mengatur RotateFlag ke True setelah animasi berakhir, tetapi tampaknya efeknya tidak jelas. Saya berharap tuan yang relevan dapat memberi saya beberapa saran dan semua orang akan membuat kemajuan bersama.
Di atas adalah seluruh konten artikel ini. Untuk konten lebih lanjut, silakan merujuk ke: Ringkasan efek korsel gambar JavaScript. Terima kasih atas bacaan Anda.