Carousel image component js Code and component js Code

Carousel image component js Code and component js Code

This article provides examples of the JavaScript carousel image component code for your reference. The specific content is as follows:

// Function Rolling (o) {this. index = ++ o. index | 1; // The current rolling position. If the index is greater than the number of carousel listLength or equal to 0, this is the non-rolling status. num = o. num | 1; // by default, a list is scrolled this. obj = o. obj | null; // The ul this. perObj = o. perObj | null; // The button object that pages up. this. nextObj = o. nextObj | null; // The Button Object for turning down the page this. focusPoint = o. focusPoint | null; // focus object. The default value is null. Indicates that the focus object is not enabled. If you want to enable it, you can pass in the focus object to enable this automatically. focusClass = o. focusClass | 'mien-active'; // Class Name of the current focus position this. replaceBtn = o. replaceBtn | false; // whether to replace the flip button image when carousel to the first or last page. The default value is true. Replace the button image with the re + image name. For example, per.png is replaced with the re-per.ping console. log (o. replaceBtn) this. listLength = Math. ceil (o. obj. find ('lil '). length/this. num); // The number of carousel times this. listObj = o. obj. children ('lil'); this. listWidth = this. listObj. width () + parseInt(this.listObj.css ('margin-left') + parseInt(this.listObj.css ('margin-right'); // list width this. init (); // initialization}; Rolling. prototype. init = function () {var thisObj = this; this. initLeft (); this. replac EFun (); 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 a focus and add the class mien-activeRolling.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; // The previous focus position var index = $ (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); // initialize the position where the full screen image is displayed} Rolling. prototype. rollPrev = function () {-- this. index; // 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');} // 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': 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;} function createRolling (o) {return new Rolling (o );}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.