이 기사에서는 참조에 대한 JavaScript 회전식 다이어그램 구성 요소 코드를 공유합니다. 특정 내용은 다음과 같습니다
// 회전 목마 다이어그램 구성 요소 함수 롤링 (o) {this.index = ++ o.index || 1; // 현재 스크롤 위치는 인덱스가 목록 길이 또는 0과 동일 할 수있는 횟수보다 큰 경우, 스크롤 할 수없는 상태입니다 .num = O.num || 1; // 기본적으로 목록을 스크롤 this.OBJ = O.OBJ || 널; // ul this.perobj = O.perobj || 널; // 위쪽으로 뒤집는 버튼 객체 .nextObj = O.NextObj || 널; // 아래쪽으로 뒤집는 버튼 객체. 널; // 초점 객체, 기본값은 null입니다. 초점 객체가 켜지지 않음을 의미합니다. 들어오는 포커스 객체를 켜려면 자동으로 켜질 수 있습니다 .focusClass = O.FocusClass || 'Mien-Active'; // 현재 초점 위치 클래스 이름 this.ReplaceBtn = O.ReplaceBtn || false; // 첫 페이지 또는 마지막 페이지가 회전 될 때 페이지 회전 버튼을 교체할지 여부. 기본값은 true이며 버튼 이미지를 Re+ 이미지 이름으로 바꾸십시오. 예를 들면 : per.png를 reper.ping console.log (o.replacebtn)로 바꾸십시오. // 캐 러셀의 무수한 수 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'). on ( 'click', function () {thisobj.rollprev ();}); this.nextobj.unbind ( 'click'). on ( 'click', function () {thisobj.rollnext ();}); } // 초점을 만들고 클래스를 추가하여 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.nextobj.find ( 'IMG'); ! thisobj.replacebtn) {perobject.attr ( 'src', perobject.attr ( 're-src'); nexobject.attr ( 'src', nexobject.attr ( 'data-src')} if (sum> 0) {theobj.obj.animate ({marginleft : ' + math.abs (sum) * theobj.num * theobj.listwidth. thisobj.obj.animate ({marginleft : ' + =' + math.abs (sum) * thisobj.num * thisobj.listwidth + 'px'}). });} rolling.prototype.initleft = function () {if (this.index == 1) {return; } this.obj.css ( 'margin -left', -(this.index -1) * this.listwidth); // 전체 화면 이미지 디스플레이의 위치를 초기화} rolling.rollprev = function () { -this.index; // 첫 번째 페이지를 클릭 할 때 if (this.index <= 1 &&! this.replacebtn) {this.perobj.find ( 'img'). attr ( 'src', this.perobj.find ( 'img')). attr ( 'data-src')); } if (! this.thisIndex ()) {++ this.index; 반품; } 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 (th리 } // 마지막 페이지를 클릭하면 if (! this.thisIndex ()) { -this.index; 반품; } 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'), nexobject = this.nextobj.find ( 'img'); var perrc = perobject.attr ( 'src'), nextsrc = nexobject.attr ( 'src'); perobject.attr ({ 'data-src': perrrc, 're-src': this.splitsrc (perrc)}); nexobject.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;} 함수 크레이터 롤링 (o) {return new Rolling (O);}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.