Este artículo comparte el código de componente del diagrama de carrusel JavaScript para su referencia. El contenido específico es el siguiente
// Rolling de función del componente del diagrama de carrusel (o) {this.index = ++ o.index || 1; // La posición de desplazamiento actual, cuando el índice es mayor que el número de veces, se puede cuidar la longitud de lista o igual a 0, es un estado no rolable este.num = o.num || 1; // desplaza una lista por defecto this.obj = o.obj || nulo; // El objeto se acariciará this.perobj = O.Perobj || nulo; // El objeto de botón que voltea esto.nextobj = o.nextobj || nulo; // El objeto de botón que voltea hacia abajo esto.focuspoint = o.focuspoint || nulo; // El objeto de enfoque, predeterminado es nulo. Significa que el objeto de enfoque no se enciende. Si desea activar el objeto de enfoque entrante, puede activar automáticamente esto.focusclass = o.focusclass || 'mien-activo'; // El nombre de clase de posición de enfoque actual este.replacebtn = o.replaceBtn || falso; // si reemplazar la imagen del botón de giro de la página cuando la primera o la última página se acaricia. El valor predeterminado es verdadero y reemplace la imagen del botón con el nombre de la imagen Re+. Por ejemplo: reemplace Per.png con reper.ping console.log (O.replaceBtn) this.listLength = Math.Ceil (o.obj.find ('li'). Longitud / this.num); // Número de carruseles 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 (); // Inicialización}; Rolling.prototype.init = function () {var thisObj = this; this.initleft (); this.replaceFun (); if (this.focuspoint! == null) {this.createFocusPoint (); } this.perobj.unbind ('hacer clic'). on ('hacer clic', function () {thisObj.rollPrev ();}); this.nextobj.unbind ('hacer clic'). on ('hacer clic', function () {thisObj.RollNext ();}); } // Crea Focus y agregue la clase Mien-Activerolling.prototype.createfocuspoint = function () {var str = '', thisObj = this; for (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; // La posición de enfoque anterior var de la posición var de enfoque = $ (this) .index () + 1; // El enfoque actual de click var sum = index - OldIndex; var de varObject = thisobj.perobj.Find ('img'); thisObj.nextobj.find ('img'); ! thisObj.replaceBtn) {peroObject.attr ('src', peroObject.attr ('re-src')); peroObject.Attr ('src', peroObject.attr ('re-src')); thisObj.listwidth + 'px'}); $ (this) .AddClass (thisObj.focusClass) .siblings (). RemoveClass (thisObj.focusClass); } this.obj.css ('margin -left', -(this.index -1) * this.listwidth); // Inicializa la posición de la imagen de la imagen de pantalla completa} rolling.prototype.rollprev = function () {--this.index; // Al hacer clic en la primera página, return if (this.index <= 1 &&! This.replaceBtn) {this.perobj.find ('img'). Attr ('src', this.perobj.find ('img'). Attr ('data-src')); } if (! this.thisindex ()) {++ this.index; devolver; } 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')); } // Al hacer clic en la última página, return if (! This.thisindex ()) {--this.index; devolver; } 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 peroObject = this.perobj.find ('img'), nextObject = this.nextobj.find ('img'); var persrc = peroObject.Attr ('src'), nextSrc = nextObject.Attr ('src'); peroObject.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.thisindex = function () {if (this.index> this.listlength | this.index <= 0) {return false; } return true;} función creatolling (o) {return new Rolling (O);}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.