Este artigo compartilha o código de componente do diagrama de carrossel JavaScript para sua referência. O conteúdo específico é o seguinte
// Função do componente do diagrama de carrossel Rolling (o) {this.index = ++ o.index || 1; // A posição de rolagem atual, quando o índice é maior que o número de vezes que pode ser agitada de listagem ou igual a 0, é um estado não rolável this.num = O.num || 1; // role uma lista por padrão this.obj = o.obj || nulo; // o objeto a ser agitado ul. nulo; // o objeto de botão que vira para cima isso.nextobj = o.nextobj || nulo; // O objeto de botão que vira para baixo this.focuspoint = O.FocusPoint || nulo; // O objeto de foco, o padrão é nulo. Isso significa que o objeto de foco não liga. Se você deseja ativar o objeto de foco de entrada, você pode ativar automaticamente isso.focusclass = O.focusclass || 'mien-attive'; // o nome da classe de foco atual this.replaceBtn = o.replaceBtn || FALSO; // se deve substituir a imagem do botão Virar a página quando a primeira ou a última página estiver carrossel. O valor padrão é verdadeiro e substitua a imagem do botão pelo nome da imagem RE+. Por exemplo: substitua per.png pelo reper.ping console.log (o.replaceBtn) this.ListLength = Math.ceil (O.obj.find ('li'). Comprimento / this.num); // Número de carrosséis this.ListObj = O.Obj.Children ('Li'); this.ListWidth = this.ListObj.width () + parseint (this.listObj.css ('margin-left')) + parseint (this.listobj.css ('margem-direita'); // listWidth this.init (); // inicialização}; Rolling.prototype.init = function () {var thisObj = this; this.initleft (); this.replacefun (); if (this.focuspoint! == null) {this.createFocuspoint (); } this.perobj.unbind ('clique'). this.Nextobj.unbind ('clique'). } // Crie foco e adicione a 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 (). Clique (function () {var Oldindex = $ ('. thisobj.nextobj.find ('img'); thisobj.replaceBtn) {perobject.attr ('src', perobject.attr ('re-src')); NextObject.attr ('src', nextObject.attr ('data-src')); thisobj.obj.animate ({marginleft: ' + =' + math.abs (soma) * thisobj.num * thisobj.listwidth + 'px'}); = function () {if (this.index == 1) {return; } this.obj.css ('margin -left', -(this.index -1) * this.listwidth); // Inicialize a posição do visor da imagem da tela inteira} rolling.prototype.rollPrev = function () {--this.index; // Ao clicar na primeira página, retorne se (this.index <= 1 &&! This.replaceBtn) {this.perobj.find ('img'). Att ('src', this.perobj.find ('img'). Att ('data-src')); } if (! this.thisIndex ()) {++ this.index; retornar; } 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')); } // Ao clicar na última página, retorne if (! This.thisIndex ()) {--this.index; retornar; } 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': nextSrc, 're-src': this.splitsrc (nextSrc)});} rolling.prototype.splitsrc = function (str) {var list = str.split ('/'); var dados = list [list.Length-1]; var sub = data.substr (0, data.indexof ('.')); return str.place (sub, 're' + sub);} rolling.prototype.ThisIndex = function () {if (this.index> this.listLength | this.index <= 0) {return false; } return true;} função createrolling (o) {return new rolling (o);}O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.