This article shares the JavaScript carousel diagram component code for your reference. The specific content is as follows
//Carousel diagram component function Rolling(o) { this.index = ++o.index || 1; //The current scrolling position, when index is greater than the number of times it can be caroused listLength or equal to 0, it is a non-scrollable state this.num = o.num || 1; //Scroll a list by default this.obj = o.obj || null; //The object to be caroused ul this.perObj = o.perObj || null; //The button object that flips upwards this.nextObj = o.nextObj || null; //The button object that flips downwards this.focusPoint = o.focusPoint || null; //The focus object, default is null. It means that the focus object does not turn on. If you want to turn on the incoming focus object, you can automatically turn on this.focusClass = o.focusClass || 'mien-active'; //The current focus position class name this.replaceBtn = o.replaceBtn || false;//Whether to replace the page turn button picture when the first or last page is carouseled. The default value is true, and replace the button image with re+ image name. For example: replace per.png with re-per.ping console.log(o.replaceBtn) this.listLength = Math.ceil(o.obj.find('li').length / this.num); //Num number of carousels 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(); //Initialization}; 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 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></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 current focus of 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 of the full screen image display}Rolling.prototype.rollPrev = function() { --this.index; //When clicking on the first page, 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 clicking on the last page, 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 to everyone's learning and I hope everyone will support Wulin.com more.