_javascript techniques for the JS code of the Carousel diagram component

This example for you to share the JavaScript Carousel Diagram component code for your reference, the details are as follows

Wheel map component function rolling (o) {this.index = ++o.index | | 1;//current scrolling position, when index is greater than the number of rotations listlength or equal to 0, is not scrollable this.num = O . num | | 1; Default scrolling a list this.obj = O.obj | | Null Objects to be this.perobj ul = O.perobj | | Null Page Up button Object this.nextobj = O.nextobj | | Null Page Down button Object this.focuspoint = O.focuspoint | | Null The focus object, which defaults to null. Meaning does not open the focus object, such as to open the object can be passed in focus automatically open This.focusclass = O.focusclass | | ' Mien-active '; Current focus Position class name This.replacebtn = O.REPLACEBTN | | false;//whether to replace the page-flipping button picture when the Carousel is on the first or last page. The default value is true and the button picture is replaced by the re+ picture name. For example: Per.png replaces re-per.ping console.log (o.replacebtn) this.listlength = Math.ceil (o.obj.find (' Li '). Length/this.num);
 Number of Cycles This.listobj = O.obj.children (' li '); This.listwidth =this.listobj.width () + parseint (this.listObj.css (' Margin-left ')) + parseint (This.listObj.css (' Margin-right ')); List width this.init ();
Initialize};
  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 ();
 });
 //Create focus and add class to the focus of current position mien-active Rolling.prototype.createFocusPoint = function () {var str = ', thisobj = this; for (var i = 0; i < this.listlength i++) {if (i = = this.index-1) {str = ' <li class= "' + This.focusclass + '
  "></li>";
  else {str = ' <li></li> ';
 } this.focusPoint.append (str); This.focusPoint.children (). Click (function () {var oldindex = $ ('. ' + thisobj.focusclass). Index () + 1;//previous focus position Var in Dex = $ (this). Index () + 1;
  The focus of the current click var sum = index-oldindex;
  var perobject = thisObj.perObj.find (' img ');
  var nextobject = thisObj.nextObj.find (' img ');
   if (index = = 1 &&!thisobj.replacebtn) {perobject.attr (' src ', perobject.attr (' data-src '));
  Nextobject.attr (' src ', nextobject.attr (' data-src ')); }else if (index = = Thisobj.listlength &&!thisobj.replacebtn) {perobject.attr (' src ', perobject.attr (' re-src '));
  Nextobject.attr (' src ', nextobject.attr (' re-src '));
   }else if (!thisobj.replacebtn) {perobject.attr (' src ', perobject.attr (' re-src '));
  Nextobject.attr (' src ', nextobject.attr (' data-src '));
  } Thisobj.index + = sum;
   if (Sum > 0) {thisObj.obj.animate {marginleft: ' = ' + math.abs (SUM) * thisobj.num * thisobj.listwidth + ' px '
  }); } if (Sum < 0) {thisObj.obj.animate {marginleft: ' + ' + math.abs (SUM) * thisobj.num * thisobj.listwidth + ' px
  '
   });
 } $ (this). addclass (Thisobj.focusclass). Siblings (). Removeclass (Thisobj.focusclass);
});
 } Rolling.prototype.initLeft = function () {if (This.index = = 1) {return; } this.obj.css (' Margin-left ',-(this.index-1) * this.listwidth);
 Initializes the location where the Full-screen picture appears} Rolling.prototype.rollPrev = function () {--this.index; When you click on the first page, return the 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;
 Return
 } 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 '));
  //When the last page is clicked return if (!this.thisindex ()) {--this.index;
 Return
 } 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 perobject = this.perObj.find (' img '), nextobject = This.nextObj.find (' img ');
 var persrc = perobject.attr (' src '), nextsrc = nextobject.attr (' src ');
 Perobject.attr ({' data-src ':p ersrc, ' 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; function Createrolling (o) {return new rolling (o);}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.