js-Entwicklungs-Plugin zum Erzielen eines Tab-Effekts

<div class="tab" data-config='{ // Passen Sie die Konfiguration im Tag "triggerType": "click" an,
   "Effekt": "verblassen",
   "aufrufen": 2,
   "auto": 1000
     }'>
  <ul Klasse="Tab-Navigation">
   <li class="active"><a href="javascript:void(0);" >Neuigkeiten</a></li>
   <li><a href="javascript:void(0);" >Unterhaltung</a></li>
   <li><a href="javascript:void(0);" >Filme</a></li>
   <li><a href="javascript:void(0);" >Technologie</a></li>
  </ul>
  <div Klasse="Inhalt">
   <div Klasse="aktueller Inhaltsartikel">
    <img src="./images/pic1.jpg">
   </div>
   <div Klasse="Inhaltselement">
    <img src="./images/pic2.jpg">
   </div>
   <div Klasse="Inhaltselement">
    <img src="./images/pic3.jpg">
   </div>
   <div Klasse="Inhaltselement">
    <img src="./images/pic4.jpg">
   </div>
  </div>
</div>

* {
 Rand: 0;
 Polsterung: 0;
}
ul, li {
 Listenstil: keiner;
}
Körper {
 Hintergrund: #323232;
 Schriftgröße: 12px;
 Polsterung: 100px;
}
.tab {
 Breite: 300px;
}
.tab .tab-nav {
 Höhe: 30px;
}
.tab .tab-nav li {
 Anzeige: Inline-Block;
 Rand rechts: 5px;
 Hintergrund: #767676;
 Rahmenradius: 3px 3px 0 0;
}
.tab .tab-nav li a {
 Anzeige: Block;
 Textdekoration: keine;
 Höhe: 30px;
 Zeilenhöhe: 30px;
 Polsterung: 0 20px;
 Farbe: #fff;
}
.tab .tab-nav li.active {
 Hintergrund: #fff;
 Farbe: #777;
}
.tab .tab-nav li.active a {
 Farbe: #777;
}
.tab .inhalt {
 Hintergrund: #fff;
 Höhe: 200px;
 Polsterung: 5px;
}
.tab .Inhaltselement {
 Position: absolut;
 Anzeige: keine;
}
.tab .content img {
 Breite: 290px;
 Höhe: 200px;
}
.tab .inhalt .aktuell {
 Anzeige: Block;
}

(Funktion () {
 Funktion Tab (Registerkarte)
 {
  dies.tab = Tab;
  var _this_ = dies;
  // Standardkonfigurationsparameter, Attributname besteht aus doppelten Anführungszeichen, sonst schlägt das ParseJSON-Escape fehl. this.config = {
   // Wird verwendet, um den Triggertyp der Maus, Klick oder Mouseover zu definieren
   "triggerType": "mouseover",
   // Wird verwendet, um den Inhaltsumschalteffekt zu definieren, ob es sich um einen direkten Umschalteffekt oder einen Ein- und Ausblendeffekt handelt "effect": "default",
   // Die standardmäßig anzuzeigende Registerkarte
   "aufrufen": 1,
   // Wird verwendet, um zu definieren, ob die Registerkarte automatisch wechselt und anzugeben, wie lange der Wechsel dauert „auto“: false
  }
  // Wenn die Konfiguration existiert, erweitern Sie die ursprüngliche Konfiguration und führen Sie sie mit $.extend zusammen, wenn (this.getConfig()) {
   $.extend(diese.config, diese.getConfig());
  }
  // Mausauslöserfunktion var config = this.config; // Speicherkonfiguration, this.config wird jedes Mal suchen this.liItem = this.tab.find('.tab-nav li'); // Li abrufen
  this.contentItem = this.tab.find('.content div'); // Inhalt abrufen // Bestimmen, ob darauf geklickt wird. . Führen Sie während des Betriebs die Aufrufmethode zum Umschalten aus, wenn (config.triggerType === 'click') {
   dies.liItem.click(Funktion () {
    _dieses_.invoke($(dieses));
   });
  } anders {
   dies.liItem.mouseover(Funktion () {
    _dieses_.invoke($(dieses));
   });
  }

  // Automatische Umschaltfunktion if (this.config.auto) {
   dieser.timer = null;
   this.count = 0; // Zähler this.autoplay();
   // Stoppen, wenn die Maus oben ist, und fortfahren, wenn sie wegbewegt wird this.tab.hover(function () {
    clearInterval(_this_.timer); // das ist this.tab
   }, Funktion () {
    _diese_.autoplay();
   })
  }

  // Die Standardanzeigenummer if (this.config.invoke > 1) {
   this.invoke(this.liItem.eq(this.config.invoke - 1)); // Direkter Schalter}
 }

 Tab.prototype = {
  // Konfigurationsparameter abrufen getConfig: function () {
   //Inhalt der Datenkonfiguration aus dem Registerkartenelement entfernen var config = this.tab.attr('data-config');
   if (config && config != '') {
    return $.parseJSON(config); //JSON-Objekt in JS-Objekt konvertieren} else {
    gibt null zurück;
   }
  },
  // Holen Sie sich das übergebene li und wechseln Sie zum Aufruf: Funktion (li) {
   var index = li.index(); // Index von li abrufen var liItem = this.liItem;
   var contentItem = dieses.contentItem;
   
   li.addClass('active').siblings().removeClass('active'); // Aktiv zu sich selbst hinzufügen und andere Geschwister entfernen // Ein- und Ausblenden oder Standard var effect = this.config.effect;
   wenn (Effekt === 'Standard') {
    contentItem.eq(index).addClass('aktuell').geschwister().removeClass('aktiv');
   } anders {
    contentItem.eq(index).fadeIn().geschwister().fadeOut();
   }
   // Beim automatischen Umschalten die Anzahl ändern, sonst jedes Mal von vorne beginnen. this.count = index;
  },
  // Autoplay automatisch umschalten: function () {
   var _this_ = dies;
   var length = this.liItem.length; // Länge ermitteln this.timer = setInterval(function() {  
    _this_.count++; // Anzahl plus eins, das ist this.timer
    if (_this_.count >= Länge) {
     _dieser_.Anzahl = 0;
    }
    // Welches Li-Element löst das Ereignis aus_this_.liItem.eq(_this_.count).trigger(_this_.config.triggerType);
   }, diese.config.auto);
  }
 }

 window.Tab = Tab; // Tab als Fensterobjekt registrieren, sonst ist von außen kein Zugriff möglich})();

// Übergeben Sie den ersten Tab an die Tab-Klasse var tab = new Tab($('.tab').eq(0));

// Initialisieren durch init Tab.init = function (tabs) {
  tabs.each(Funktion () {
   neuer Tab($(dieser));
  });
 }

Tab.init($('.tab'));

// Als jQuery-Methode registrieren $.fn.extend({
  Tab: Funktion () {
   this.each(function () { // Wer hat die Tab-Methode aufgerufen? new Tab($(this)); // Dies ist das li, das each verwendet hat.
   });
   gib dies zurück; // Kettenoperation}
 })

$('.tab').tab();