تشارك هذه المقالة رمز مكون JavaScript Carousel Component للرجوع إليه. المحتوى المحدد كما يلي
// carousel diagram component function rolling (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 || باطل؛ // كائن الزر الذي يقلب لأسفل this.focuspoint = o.focuspoint || باطل؛ // كائن التركيز ، الافتراضي فارغ. وهذا يعني أن كائن التركيز لا يتم تشغيله. إذا كنت ترغب في تشغيل كائن التركيز الوارد ، فيمكنك تشغيل هذا. 'mien-active' ؛ // اسم فئة التركيز الحالية this.replaceBtn = O.ReplaceBtn || FALSE ؛ // سواء كان من الممكن استبدال صورة زر تشغيل الصفحة عندما تكون الصفحة الأولى أو الأخيرة مملوءة بالركض. القيمة الافتراضية صحيحة ، واستبدل صورة الزر باسم صورة RE+. على سبيل المثال: استبدال per.png مع reper.ping console.log (o.replaceBtn) this.listlength = math.ceil (o.obj.find ('li'). length / this.num) ؛ // عدد عدد carousels 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 ('click'). on ('click' ، function () {thisobj.rollprev () ؛}) ؛ this.nextobj.unbind ('click'). on ('click' ، function () {thisobj.rollnext () ؛}) ؛ } // إنشاء التركيز وأضف الفئة mien-activerolling.prototype.createfocuspoint = function () {var str = '' ، thisobj = this ؛ لـ (var i = 0 ؛ i <this.listlength ؛ i ++) {if (i == this.index - 1) {str+= '<li> </li>' ؛ } آخر {str += '<li> </li>' ؛ }} this.focuspoint.append (str) ؛ هذا. thisobj.nextobj.find ('img') ؛ ! perobject.attr ('src' ، perobject.attr ('re-src') ؛ thisobj.listwidth + 'px'}) ؛ $ (this) .addClass (thisobj.focusclass) .siblings (). removeClass (thisobj.focusclass) ؛ } this.obj.css ('margin -left' ، -(this.index -1) * this.listwidth) ؛ // تهيئة موضع عرض صورة كامل الشاشة} rolling.prototype.rollprev = function () { -this.index ؛ // عند النقر على الصفحة الأولى ، ارجع إذا (this.index <= 1 &&! this.replaceBtn) {this.perobj.find ('img'). attr ('src' ، this.perobj.find ('img'). attr ('data-src')) ؛ } if (! this.tisIndex ()) {++ this.index ؛ يعود؛ } 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) {$ ('. }} 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')) ؛ } // عند النقر على الصفحة الأخيرة ، ارجع if (! this.ThisIndex ()) { -this.index ؛ يعود؛ } 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) {$ ('. }} 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' + sub) ؛} rolling.prototype.TisIndex = function () {if (this.index> this.listlength | this.index <= 0) {return false ؛ } return true ؛} createrolling (o) {return new rolling (o) ؛}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.