この記事では、参照用のJavaScript Carouselダイアグラムコンポーネントコードを共有しています。特定のコンテンツは次のとおりです
//カルーセル図コンポーネント関数ローリング（o）{this.index = ++ o.index || 1; //現在のスクロール位置では、インデックスがlistlengthまたは0に等しい回数よりも大きい場合、それは非抑制性状態this.num = o.num || 1; //デフォルトでリストをスクロールするthis.obj = o.obj ||ヌル; //オブジェクトはカルーシングされますul this.perobj = o.perobj ||ヌル; //これを上向きにフリップするボタンオブジェクト。nextobj= o.nextobj ||ヌル; // this.focuspoint = o.focuspoint ||ヌル; //フォーカスオブジェクト、デフォルトはnullです。これは、フォーカスオブジェクトがオンになっていないことを意味します。着信フォーカスオブジェクトをオンにする場合は、自動的にこれをオンにすることができます。 「Mien-active」; //現在のフォーカスポジションクラス名this.replacebtn = o.replacebtn || false; //最初のページまたは最後のページがカルーセリングされているときにページターンボタン画像を置き換えるかどうか。デフォルト値は真であり、ボタン画像をRe+画像名に置き換えます。例：per.pngをreper.ping console.log（o.replacebtn）this.listlength = math.ceil（o.obj.find（ 'li'）。length / this.num）に置き換えます。 //カルーセルの数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（）; //初期化}; rolling.prototype.init = function（）{var thisobj = this; this.initleft（）; this.replacefun（）; if（this.focuspoint！== null）{this.createfocuspoint（）; } this.perobj.unbind（ 'click'）。 this.nextobj.unbind（ 'click'）。 } //フォーカスを作成してクラスを追加します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; //前のフォーカスポジションvar index = $（this）.index（） + 1; // click var sum = index -oldindex -oldindex; verobj.ferobj.funt（ 'img）; thisobj.nextobj.find（ 'img'）; ！thisobj.replacebtn）{perobject.attr（ 'src'、perobject.attr（ 're-src'））; perobject.attr（ 'src'、perobject.attr（ 'src'）、nextobject.attr（ 'data-src'）） thisobj.listwidth + 'px'}）; $（this）.addclass（thisobj.focusclass）.siblings（）。 } this.obj.css（ 'margin -left'、 - （this.index -1） * this.listwidth）; //フルスクリーン画像の位置を初期化する} rolling.prototype.rollprev = function（）{ - this.index; //最初のページをクリックすると、if（this.index <= 1 &&！this.replacebtn）{this.perobj.find（ 'img'）。 } if（！this.thisindex（））{++ this.index;戻る; } if（！this.replacebtn）{this.nextobj.find（ 'img'）。 } 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'）。 } //最後のページをクリックすると、if（！this.thisindex（））{-this.index;を返します。戻る; } if（！this.replacebtn）{this.perobj.find（ 'img'）。attr（ 'src'、this.perobj.find（ 'img'）。 } this.obj.animate（{mignleft： ' - =' + 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）;}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。