Эта статья разделяет код компонента диаграммы карусели JavaScript для вашей ссылки. Конкретный контент заключается в следующем
// Диаграмма Carousel Component Function Rolling (o) {this.index = ++ o.index || 1; // текущая позиция прокрутки, когда индекс больше, чем количество раз, оно может быть караушеное, или равна 0, это не разбесное состояние this.num = o.num || 1; // Прокрутите список по умолчанию this.obj = o.obj || нулевой; // объект, который будет карусен ul this.perobj = o.perobj || нулевой; // Кнопкий объект, который переворачивает вверх. нулевой; // Кнопкий объект, который переворачивается вниз. нулевой; // объект фокуса, по умолчанию ноль. Это означает, что объект фокуса не включается. Если вы хотите включить входящий объект Focus, вы можете автоматически включить это .focusClass = O.FocusClass || «Mien-Active»; // Текущее класс позиции фокусировкой 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 ('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.focusClass) .Index () + 1; // Предыдущая позиция фокуса var index = $ (this) .Index () + 1; // Текущий фокус ncual varum = index - oldIndex; thisobj.nextobj.find ('img'); ! ThisObj.replacebt) {perobject.attr ('src', perobject.attr ('re-src')); NextObject.attr ('src', nextobject.attr ('data-src')); thisObj.obj.animate ({marginleft: ' + =' + math.abs (sum) * thisobj.num * thisobj.listwidth + 'px'}); = function () {if (this.index == 1) {return; } this.obj.css ('margin -left', -(this.index -1) * this.listwidth); // Инициализировать положение полноэкранного отображения изображения} rolling.prototype.rollprev = function () { -this.index; // При нажатии на первую страницу верните if (this.index <= 1 &&! This.replacebt) {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 (this.index == this.listlength &&! this.replacebtn) {this.nextobj.find ('img'). attr ('src', this.nextobj.find ('img'). attr ('re-src')); } // При нажатии на последнюю страницу верните 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'), 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 больше.