Cet article partage le code de composant du diagramme du carrousel JavaScript pour votre référence. Le contenu spécifique est le suivant
// Fonction du composant du diagramme du carrousel Rolling (o) {this.index = ++ o.index || 1; // La position de défilement actuelle, lorsque l'index est supérieur au nombre de fois, il peut être enraciné ListLength ou égal à 0, il s'agit d'un état non-défilable this.num = o.num || 1; // Faites défiler une liste par défaut ce.obj = o.obj || nul; // l'objet à cuire ul.perobj = o.perobj || nul; // l'objet bouton qui retourne vers le haut nul; // l'objet bouton qui retourne vers le bas ce.focuspoint = o.focuspoint || nul; // L'objet Focus, la valeur par défaut est nul. Cela signifie que l'objet Focus ne s'allume pas. Si vous souhaitez activer l'objet de mise au point entrant, vous pouvez automatiquement activer ce.focusClass = o.focusclass || «mien-active»; // Le nom de classe de position de mise au point actuel this.replacebtn = o.replacebtn || FAUX; // Que ce soit pour remplacer l'image du bouton de virage de la page lorsque la première ou la dernière page est stimulée. La valeur par défaut est vraie et remplacez l'image du bouton par le nom de l'image RE +. Par exemple: remplacer per.png par reper.ping console.log (o.replacebtn) this.listLength = math.ceil (o.obj.find ('li'). Length / this.num); // num Nombre de carrousels this.listoBj = o.obj.children ('li'); this.ListWidth = this.ListObj.Width () + paSeInt (this.ListObj.css ('margin-left')) + parseInt (this.listoBj.css ('margin-droite')); // listWidth this.init (); // initialisation}; Rolling.prototype.init = function () {var thisObj = this; this.initleft (); this.replacefun (); if (this.focuspoint! == null) {this.createFocuspoint (); } this.perobj.unbind ('click'). sur ('click', function () {thisObj.rollPrev ();}); this.nextObj.unbind ('click'). sur ('click', function () {thisObj.rollNext ();}); } // Créer une mise au point et ajouter la classe 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 (). cliquez (function () {var oldindex = $ ('. thisObj.nextoBj.find ('img'); ! thisObj.replaceBtn) {perObject.attr ('src', perObject.attr ('re-src')); NextObject.attr ('src', nextObject.attr ('data-src');} thisObj.index + = sum; thisObj.obj.animate ({marginleft: '+ =' + math.abs (sum) * thisObj.num * thisObj.ListWidth + 'px'}); });} Rolling.prototype.initleft = function () {if (this.index == 1) {return; } this.obj.css ('margin-left', - (this.index - 1) * this.listWidth); // Initialisez la position de l'affichage d'image en plein écran} rolling.prototype.rollPrev = function () {- this.index; // lorsque vous cliquez sur la première page, renvoyez if (this.index <= 1 &&! This.replacebtn) {this.perobj.find ('img'). Att ('src', this.perobj.find ('img'). Att ('data-src')); } if (! this.ThisIndex ()) {++ this.index; retour; } if (! this.replacebtn) {this.nextoBj.find ('img'). att ('src', this.nextoBj.find ('img'). att ('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'). att ('src', this.nextoBj.find ('img'). att ('re-src')); } // Lorsque vous cliquez sur la dernière page, retournez if (! This.ThisIndex ()) {- This.Index; retour; } if (! this.replacebtn) {this.perobj.find ('img'). att ('src', this.perobj.find ('img'). att ('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': nexsrc, 're-src': this.splitsrc (nexsrc)});} rolling.prototype.splitsrc = fonction (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;} fonction Createrolling (o) {return new Rolling (o);}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.