Dieser Artikel teilt den JavaScript -Karussell -Diagrammkomponentencode für Ihre Referenz. Der spezifische Inhalt ist wie folgt
// Karusselldiagrammkomponentenfunktion Rolling (o) {this.index = ++ O.Index || 1; // Die aktuelle Scrolling-Position ist, wenn der Index größer ist als die Anzahl, mit der er karizierte Listlänge oder gleich 0, ein nicht-krollbarer Zustand this.num = o.num || 1; // standardmäßig eine Liste scrollen.obj = o.obj || Null; // Das Objekt, das kariert werden kann. Null; // Das Schaltflächenobjekt, das dies nach oben fließt. Null; // das Tastenobjekt, das dies nach unten fließt. Null; // Das Fokusobjekt ist null. Es bedeutet, dass sich das Fokusobjekt nicht einschaltet. Wenn Sie das eingehende Fokusobjekt einschalten möchten, können Sie diese automatisch einschalten. "mien-aktiv"; // Der aktuelle Schwerpunktpositionsklassenname this.ReplacBtn = O.Replacbtn || Falsch; // Ob das Bild des Seitenwechselschaltblatts ersetzt werden, wenn die erste oder letzte Seite karoussen ist. Der Standardwert ist wahr und ersetzen Sie das Schaltflächenbild durch Re+ Bildname. Zum Beispiel: Ersetzen Sie per.png durch resole.log.log (O.Replacbtn) this.listlength = math.ceil (o.obj.find ('li'). Länge / this.num); // Anzahl der Karussells this.listobj = o.obj.children ('li'); this.listwidth = this.listobj.width () + parseInt (this.listobj.css ('margin-links')) + ParseInt (this.listobj.css ('Margin-Right')); // listwidth this.init (); //Initialisierung}; 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 ();}); } // Fokus erstellen und die Klasse Mien-Activerolling.Prototype.CreateFocuspoint = function () {var str = '', thisoBj = this; für (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; // Die vorherige Fokussposition var index = $ (this) .Index () + 1; // Der aktuelle Fokus von Click Var Sum = Index - alteIndex; var perobject = thisobj.perobj.perobj.perobj.Perobj.Perobj.Perobj.Fr. thisobj.nextobj.find ('img'); ! PerObject.attr ('src', perObject.attr ('Rerc'); thisobj.listwidth + 'px'}); $ (this) .AddClass (thisobj.focusClass) .Siblings (). } this.obj.css ('margin -links', -(this.index -1) * this.listwidth); // Initialisieren Sie die Position der Vollbildungsbildanzeige} rolling.prototype.rollprev = function () { -This.index; // Beim Klicken auf die erste Seite 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; zurückkehren; } if (! this.replacBtn) {this.nextObj.find ('img'). attr ('src', this.nextObj.find ('img'). attr ('daten-src')); } this.obj.animate ({marginleft: ' + =' + this.num * this.listwidth + 'px'}); if (this.focuspoint! }} 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'); } // beim Klicken auf die letzte Seite zurückgeben if (! ThisIndex ()) { -This.index; zurückkehren; } if (! this.replacBtn) {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! }} 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 = Funktion (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.thiseIndex = function () {if (this.index> this.listLength | this.index <= 0) {return false; } return true;} Funktion CreateRolling (o) {return New Rolling (o);}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.