Artikel ini membagikan kode komponen diagram Carousel JavaScript untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
// Fungsi Komponen Diagram Carousel Rolling (O) {this.index = ++ O.index || 1; // Posisi gulir saat ini, ketika indeks lebih besar dari berapa kali dapat dikarahkan dengan panjang daftar atau sama dengan 0, itu adalah keadaan yang tidak dapat digulung this.num = o.num || 1; // Gulir daftar secara default this.obj = o.obj || batal; // objek yang akan dikarus ul this.perobj = o.perobj || batal; // Objek tombol yang membalik ke atas this.nextobj = o.nextobj || batal; // Objek tombol yang membalik ke bawah this.focuspoint = o.focuspoint || batal; // Objek fokus, default adalah nol. Ini berarti bahwa objek fokus tidak menyala. Jika Anda ingin menyalakan objek fokus yang masuk, Anda dapat secara otomatis menghidupkan ini. FocusClass = O.FocusClass || 'mien-aktif'; // Nama kelas posisi fokus saat ini this.replaceBtn = o.replaceBtn || false; // apakah akan mengganti gambar tombol belok halaman saat halaman pertama atau terakhir dikarsel. Nilai default benar, dan ganti gambar tombol dengan nama gambar RE+. Misalnya: ganti per.png dengan re-per.ping console.log (o.replaceBtn) this.listlength = math.ceil (o.obj.find ('li'). Panjang / this.num); // num jumlah korsel this.listobj = o.obj.children ('li'); this.listWidth = this.listobj.width () + parseInt (this.listobj.css ('margin-left')) + parseint (this.listobj.css ('margin-right')); // listWidth this.init (); // Inisialisasi}; Rolling.prototype.init = function () {var thisobj = this; this.initleft (); this.replacefun (); if (this.focuspoint! == null) {this.createFocusPoint (); } this.perobj.unbind ('klik'). on ('click', function () {thisobj.rollprev ();}); this.nextobj.unbind ('klik'). on ('click', function () {thisobj.rollNext ();}); } // Buat fokus dan tambahkan kelas mien-activerolling.prototype.createFocuspoint = function () {var str = '', thisobj = this; untuk (var i = 0; i <this.listLength; i ++) {if (i == this.index - 1) {str+= '<li> </li>'; } else {str += '<li> </li>'; }} this.focuspoint.append (str); this.focusPoint.children().click(function() { var oldIndex = $('.' + thisObj.focusClass).index() + 1; //The previous focus position var index = $(this).index() + 1; //The current focus of click var sum = index - oldIndex; var perObject = thisObj.perObj.find('img'); var nextObject = thisobj.nextobj.find ('img'); ! Thisobj.replaceBtn) {perobject.attr ('src', perobject.attr ('re-src')); perobject.attr ('src', perobject.attr ('re-src')); thisobj.listwidth + 'px'}); $ (ini) .addclass (thisobj.focusclass) .siblings (). Removeclass (thisobj.focusclass); } this.obj.css ('margin -left', -(this.index -1) * this.listWidth); // inisialisasi posisi tampilan gambar layar penuh} rolling.prototype.rollprev = function () {--this.index; // Saat mengklik pada halaman pertama, kembalikan if (this.index <= 1 &&! This.replaceBtn) {this.perobj.find ('img'). Attr ('src', this.perobj.find ('img'). Attr ('data-src')); } if (! this.thisIndex ()) {++ this.index; kembali; } if (! this.replaceBtn) {this.nextobj.find ('img'). attr ('src', this.nextobj.find ('img'). attr ('data-src')); } this.obj.animate ({marginleft: ' + =' + this.num * this.listWidth + 'px'}); if (this.focuspoint! == null) {$ ('.' + this.focusclass) .removeclass (this.focusclass) .prev (). addClass (this.focusclass); }} Rolling.prototype.rollNext = function () {++ this.index; if (this.index == this.listLength &&! this.replaceBtn) {this.nextobj.find ('img'). attr ('src', this.nextobj.find ('img'). attr ('re-src'))); } // Saat mengklik pada halaman terakhir, kembalikan if (! This.thisIndex ()) {--this.index; kembali; } if (! this.replaceBtn) {this.perobj.find ('img'). attr ('src', this.perobj.find ('img'). attr ('re-src')); } this.obj.animate ({marginleft: '-=' + this.num * this.listWidth + 'px'}); if (this.focuspoint! == null) {$ ('.' + this.focusclass) .removeclass (this.focusclass) .next (). addClass (this.focusclass); }} Rolling.prototype.replacefun = function () {var perobject = this.perobj.find ('img'), nextObject = this.nextobj.find ('img'); var persrc = perobject.attr ('src'), nextsrc = nextObject.attr ('src'); perobject.attr ({'data-src': Persrc, 're-src': this.splitsrc (persrc)}); nextObject.attr ({'data-src': nextSrc, 're-src': this.splitsrc (nextSrc)});} rolling.prototype.splitsrc = function (str) {var list = str.split ('/'); var data = list [list.length-1]; var sub = data.substr (0, data.indexof ('.')); kembalikan str.replace (sub, 're-' + sub);} rolling.prototype.thisIndex = function () {if (this.index> this.listLength | this.index <= 0) {return false; } return true;} function createrolling (o) {return new rolling (o);}Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.