บทความนี้แชร์รหัสองค์ประกอบไดอะแกรม JavaScript Carousel สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
// ฟังก์ชั่นส่วนประกอบส่วนประกอบไดอะแกรมของ Carousel (O) {this.index = ++ O.Index || 1; // ตำแหน่งการเลื่อนปัจจุบันเมื่อดัชนีสูงกว่าจำนวนครั้งที่สามารถจัดรายการความยาวได้หรือเท่ากับ 0 มันเป็นสถานะที่ไม่สามารถควบคุมได้ this.num = o.num || 1; // เลื่อนรายการโดยค่าเริ่มต้น this.obj = o.obj || โมฆะ; // วัตถุที่จะรวบรวม ul this.perobj = o.perobj || โมฆะ; // วัตถุปุ่มที่พลิกขึ้น this.nextobj = o.nextobj || โมฆะ; // วัตถุปุ่มที่พลิกลงสิ่งนี้ focuspoint = o.focuspoint || โมฆะ; // วัตถุโฟกัสค่าเริ่มต้นเป็นโมฆะ หมายความว่าวัตถุโฟกัสไม่เปิด หากคุณต้องการเปิดวัตถุโฟกัสที่เข้ามาคุณสามารถเปิดสิ่งนี้ได้โดยอัตโนมัติ focusclass = o.focusclass || 'Mien-Active'; // ชื่อคลาสตำแหน่งโฟกัสปัจจุบันนี้ replacebtn = o.replacebtn || FALSE; // ไม่ว่าจะแทนที่ภาพปุ่มเปิดหน้าเมื่อหน้าแรกหรือหน้าสุดท้ายถูกหมุน ค่าเริ่มต้นเป็นจริงและแทนที่ภาพปุ่มด้วยชื่อภาพ RE+ ตัวอย่างเช่น: แทนที่ per.png ด้วย re-per.ping console.log (o.replacebtn) this.listlength = math.ceil (o.obj.find ('li'). length / this.num); // จำนวนของม้าหมุน 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 (); // การเริ่มต้น}; rolling.prototype.init = function () {var thisobj = this; this.initleft (); this.replacefun (); if (this.focuspoint! == null) {this.createFocusPoint (); } this.perobj.unbind ('คลิก') บน ('คลิก', function () {thisobj.rollprev ();}); this.nextobj.unbind ('คลิก') บน ('คลิก', function () {thisobj.rollnext ();}); } // สร้างโฟกัสและเพิ่มคลาส mien-activerolling.prototype.createfocuspoint = function () {var str = '', thisobj = this; สำหรับ (var i = 0; i <this.listLength; i ++) {ถ้า (i == this.index - 1) {str+= '<li> </li>'; } else {str += '<li> </li>'; }} this.focuspoint.append (str); this.focuspoint.children (). คลิก (ฟังก์ชั่น () {var oldindex = $ ('.' + thisobj.focusclass) .index () + 1; // ตำแหน่งโฟกัสก่อนหน้านี้ var index = $ (this) .index () + 1; // Thisobj.nextobj.find ('img'); ! thisobj.replacebtn) {perobject.attr ('src', perobject.attr ('re-src')); nextobject.attr ('src', nextobject.attr ('data-src'); Thisobj.obj.animate ({marginleft: ' + =' + math.abs (ผลรวม) * thisobj.num * thisobj.listwidth + 'px'}); });} rolling.prototype.initleft = function () {ถ้า (this.index == 1) {return; } this.obj.css ('margin -left', -(this.index -1) * this.listwidth); // เริ่มต้นตำแหน่งของการแสดงภาพหน้าจอเต็มรูปแบบ} rolling.prototype.rollprev = function () { -this.index; // เมื่อคลิกที่หน้าแรกให้ส่งคืนถ้า (this.index <= 1 &&! thinflacebtn) {this.perobj.find ('img'). attr ('src', this.perobj.find ('img'). attr ('data-src') } if (! this.thisIndex ()) {++ this.index; กลับ; } if (! thin.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 &&! thinflacebtn) {this.nextobj.find ('img'). attr ('src', this.nextobj.find ('img'). attr ('re-src')); } // เมื่อคลิกที่หน้าสุดท้ายให้กลับมาถ้า (! this.thisIndex ()) { -This.index; กลับ; } if (! thin.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 ('.')); return str.replace (sub, 're-re' + sub);} rolling.prototype.thisIndex = function () {ถ้า (this.index> this.listLength | this.index <= 0) {return false; } return true;} function createrolling (O) {return ใหม่ Rolling (O);}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น