1. Flash Carousel
Terlepas dari deskripsinya, implementasinya relatif sederhana dan efeknya lebih baik
2. Korsel geser
Kode HTML berikut adalah contoh (gesek kiri)
<Div style = "overflow: tersembunyi; lebar: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Kode Sumber Plugin: Sadar Rotasi Kiri dan Atas, Switching Manual Juga Sakelar Kiri Dan Atas (switching manual kode sumber utama)
var all = $panel.find('>li'), prevAll = new Array();prevAll[0] = all.eq(0);//Save all nodes in front of the target node into prevAll, and after the animation ends, these nodes are added to the back of the container one by one in order for(var i = 1; i < len; i++){ all.eq(i).css({display: 'tidak ada'}); prevall [i] = all.eq (i);} ... $ panel.animate ({'marginleft': -options.width+'px'}, options.duration, function () {for (var i = 0; i <prevall.length; i ++) {$ panel. lampai ($ ($). Sebelum node tampilan saat ini ke} $ panel.css terakhir ({marginleft: 0});})Ada dua cara utama untuk menerapkan carousel geser
1) Ganti elemen induk margin-kiri dan terus menerus tambahkan elemen anak pertama ke ujung wadah induk
Implementasi sederhana
var $ panel = $ ('example'); var scrolltimer = setInterval (function () {scrollnews ($ panel);}, 3000); function $ scrollNews () {$ panel.animate ({'marginleft': '-266px'}, 500, function () {'marginleft': '-266px'}, 500, function () {) {) {) {$ $ panel. }). Find ('> Li: First'). AppendTo ($ Panel);})}Satu masalah dengan pendekatan ini adalah bahwa mungkin ada masalah kompatibilitas pada IES lama.
2) Atur margin-kiri elemen induk dalam metode akumulasi
Namun, ketika margin-kiri diatur ke minimum (geser ke elemen terakhir), atur posisi elemen anak pertama ke bagian belakang elemen anak terakhir. Ketika elemen terakhir digulir ke elemen pertama, elemen induk-margin-kiri diatur ke 0 dan posisi elemen anak pertama dikembalikan. Berikan contoh kode sederhana
var $ panel = $ ('. Contoh'), index = 0; var scrolltimer = setInterval (function () {scrollnews ($ panel);}, 3000); function scrollnews () {if (++ index> = 2) {$ panel.css ({'Paddingleft': 266+'5) {$ Panel.css ({' Paddingleft ': 266+') $ panel.find ('> li: first'). css ({'position': 'absolute', 'left': 266*index + 'px'}); } $ panel.animate ({'marginleft': -266*index+'px'}, 500, function () {if (++ index> 3) {$ panel.css ({marginleft: 0});} if (index> = 3) {index = 0; $ panel.css ({{index> = 3) {index = 0; $ panel.cssssssss $ panel.find ('> li: first'). css ({'position': 'static', 'left': 'auto'});Plug-in gulir yang lebih kompleks perlu mendukung pengguliran horizontal dan vertikal (empat arah), dapat secara manual beralih fokus, dan dapat naik dan turun. Lampirkan kode sumber plug-in lengkap yang saya tulis
Kode Sumber Plugin JQuery.nfdscroll.js: Mendukung gulir horizontal dan vertikal (empat arah). Switching manual akan menggulir dengan arah switching.
/** * @author 'chen hua' * @date '2016-5-10' * @Description Sliding Carousel Plug-in, mendukung carousel geser horizontal dan vertikal * * @example html: <v div> <!-gulir UL-> <ul> <li> <li> <a href = "xxx" href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> </ul> <!-- Focus list, optional--> <ol> <li></li> <li></li> <li> </li> <li> </li> <li> </li> </ol> <!-Sebelumnya dan berikutnya, opsional-> <ve> <a href = "javascript: void (0);"> </a> <a href = "javascript: void (0);" startIndex: 0, lebar: '266', tinggi: '216', interval: 2000, dipilih: 'lingkaran', prevtext: '', nextText: '', Dertiction: 'Left', Callback: Function (index, $ currentNode) {console.log (index)}}); * @param startIndex {number} menggulir dari jumlah elemen gulir secara default, opsional (0-n, 0 berarti yang pertama, default adalah 0) * @param width {number} elemen gulir lebar, opsional (ketika lebarnya 0 berarti tidak ada lebar yang ditetapkan) * @para ketinggian {angka} elemen gulir) tinggi 0 {Number} Waktu interval, unit milidetik, ketika nilainya negatif, tidak ada pengguliran otomatis yang dilakukan * @param durasi {angka} durasi animasi * @param dipilih {string} gulir ikon kecil di atas/kanan atas/atas/punggung callback {string {string} scrolling arahan scrolling, lower dan right lock {punggung @param {string {string {scrolling {paket {paket {string} scrolling arahan scrolling, kidal dan kanan atas/kanan atas/punggung punggung @pumpal {string {string} scrolling arah, mendukung/kanan atas dan kanan atas/atas/punggung punggung @pback {string {scrolling arahan scrolling, lidaya punggung dan kanan atas/kanan punggung Animasi geser, parameter (indeks, $ currentNode), indeks: indeks node yang ditampilkan setelah korsel; currentNode: Objek jQuery dari node yang saat ini ditampilkan setelah carousel * @param prevText {string} teks dari tombol sebelumnya, default adalah "sebelumnya" * @param nextText {string} teks dari tombol berikutnya, Default adalah "NEXT" */ jQuery.fn.extend ({nfdscrol: funch (function) {{{nfdsRoll: foulrole) {{{nfdRoll: foulrole) {{{nfdRoll: foulrole (funchTH: Funch (funch, 0, // Lebar elemen gulir, opsional (ketika lebar adalah 0 berarti tidak ada lebar yang diatur) Tinggi: 0, // Gulir Tinggi Elemen, Opsional (Saat Tinggi 0 berarti tidak ada ketinggian yang diatur) Interval: 1000, // Waktu Interval Milidonds Durasi Selanjutnya: 400, // Durasi Animasi yang Dipilih: 'Dipilih',//SCROLL SWITCH SCRICLEK LUAR BIASA://KLUSAN AMAN DURGEX: 'Dipilih:' Dipilih ',//SCROLLS SCRIFCLING SCLANCE: Deriksi: 'Kiri', // Gulir Callback Direction: Function (index, $ currentNode) {// Pemicu segera setelah menggulir ke simpul baru, currentNode adalah objek jQuery dari simpul yang saat ini ditampilkan}}, $ this = this, $ panel = $ this.find ('> Ul'), // crosser $ Panellist = $ Panellor = $ this.find ('> UL'),//scroll CROLLER $ PANELLIST = PANEL = PANEL = PANEL = 'UL'),//SCROLLIS $ PANELLIS $ PANEL = PANEL = PANEL = PANEL = PANEL. $ this.find ('> ol> li'), // pilih Container Options = jQuery.extend (defaultOpt, opsi), animatefn, // gulir animasi max = $ panel.find ("> li"). Panjang, // jumlah node yang akan digulir = 0, // indeks dari node yang ditampilkan,/no -no -no -no. Animasi lain ditanggapi selama proses animasi iswaiting = false, // Apakah ada indeks tunggu animasi tunggu yang tak tereksekusi; // indeks target dari animasi tunggu yang tidak dieksekusi $ ('. if ($ Panellist.length <= 1) {return;} // Animasi saat ini belum selesai tetapi fokus telah diaktifkan ke tempat berikutnya. StopsCroll (); } Options.Interval); ClearInterval (NFDSCROLLTIMER);} // Gulir animasi kiri ke kanan // Parameter Toindex: Number, gulir ke fungsi indeks yang ditentukan LeftrightAnime (ToIndex) {// Metode gulir default (ToIndex == tidak ditentukan) {if (options.deriction == ') {ToIndex ==; }} if (toIndex! = FocusIndex) {inanimation = true; 'Absolute', 'Left': Options.width*toindex + 'px'}); 'PX'}); 'px'}, opsion.duration, function () {focusIndex = tind 0) {// $ panel.css ({'marginleft': -options.width*focusIndex + 'px', 'paddingleft': 0}); Options.Callback (FocusIndex, $ Panellist.eq (FocusIndex)); Toindex = FocusIndex - 1; 'Absolute', 'Top': Options.Height*Toindex + 'PX'}); 'PX'}); 'px'}, option.duration, function () {focusIndex = tind Ketika gambar saat ini adalah gambar pertama dan kemudian klik pada gambar sebelumnya $ panel.css ({'margintop': -options.height*focusIndex + 'px', 'paddingtop': 0}); Options.Callback (FocusIndex, $ Panellist.eq (FocusIndex)); '.nfdscroll-prev', function () {stopscroll (); if (! $ (this) .is ('.' + Options.Selected)) {startcroll ($ (this) .index ())); Default $ selectList.eq (focusIndex) .addclass (options.pelected); // switch focus pertama jika (options.deriction == 'left' || options.deriction == 'right') {// inisialisasi gaya, pada kenyataannya 'tidak boleh dibuat di plug-in. $ this.css ({width: options.width}); // Hanya lebar tabung yang diperlukan jika (opsi. -Options.width*focusIndex + 'px'}); CSSO.width = Options.width;} var length = $ Panel.find ('> li'). CSS (CSSO) .Length; hanya menggulir dalam empat arah: kiri/kanan/atas/bawah ');Contoh lengkap
<! Doctype html> <html> <head> <meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/> <itement> Contoh tes carousel </iteme> <style type = "text/css"> body, ul, ol {margin: 0; Padding: 0;} ul, ol {List-style: none;} .li1 {latar belakang-warna: #000;} .li2 {latar belakang-warna: #333;} .li3 {latar belakang-color: #666;} .li4 {latar belakang-warna: #999;}. EXAMPLET; Padding-left: 80px; Lebar: 186px; Tinggi: 20px; Atas: 186px; Kiri: 0px; Latar belakang: #FFF; kursor: pointer; } ol li {float: left; Lebar: 10px; Tinggi: 10px; margin: 5px; Latar Belakang: #FF0; Border-Radius: 10px; } ol li.circle {latar belakang: #f00; } </tyle> </head> <body> <div> <!-gulir konten ul-> <ul> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </a> <a href = "xxx" target = "_ blank"> </a> </a> <a li> </a href "=" _ blank "> </a> </li> </li> </a href" = "_ blank"> </a> </li> </li> </a href "=" _ blank "> </a> </li> </a href" lion = "blank <li><a href="xxx" target="_blank"></a></li> </ul> <!-- Focus list, optional --> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <!-- Previous and next, optional --> <div> <a href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </div> <type skrip = "Teks/Javascript" src = "Common/JQuery.js"> </script> <script = "Text/Javascript" src = "common/jQuery.nfdscroll.js"> </script> <script type = "text/javascript"> $ ('. Contoh'). nfdscroll ({startIndex: 0, width: '266', tinggi: '216', interval: -1, // 2000, dipilih: ',', ',', '216', Interval: -1, // 2000, dipilih: ',', ',', ',' 216 ', -sterval: -1, // 2000, dipilih:', ',', ',', '216,', -1, // 2000, dipilih: ',', ',', '216,', -1, // 2000, dipilih: ',', ',' 216, ', -1, // 2000, " callback: function (index, $ currentNode) {console.log (index)}}); </script> </body> </html>Efek tercapai
Sesuaikan secara manual gaya ol, nfdscroll-prev, dll. Di dalamnya
Metode implementasi sederhana dari korsel di atas 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.