js development plug-in to achieve tab effect

<div class="tab" data-config='{ // Customize the configuration in the tag "triggerType": "click",
   "effect": "fade",
   "invoke": 2,
   "auto": 1000
     }'>
  <ul class="tab-nav">
   <li class="active"><a href="javascript:void(0);" >News</a></li>
   <li><a href="javascript:void(0);" >Entertainment</a></li>
   <li><a href="javascript:void(0);" >Movies</a></li>
   <li><a href="javascript:void(0);" >Technology</a></li>
  </ul>
  <div class="content">
   <div class="content-item current">
    <img src="./images/pic1.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic2.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic3.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic4.jpg">
   </div>
  </div>
</div>

* {
 margin: 0;
 padding: 0;
}
ul, li {
 list-style: none;
}
body {
 background: #323232;
 font-size: 12px;
 padding: 100px;
}
.tab {
 width: 300px;
}
.tab .tab-nav {
 height: 30px;
}
.tab .tab-nav li {
 display: inline-block;
 margin-right: 5px;
 background: #767676;
 border-radius: 3px 3px 0 0;
}
.tab .tab-nav li a {
 display: block;
 text-decoration: none;
 height: 30px;
 line-height: 30px;
 padding: 0 20px;
 color: #fff;
}
.tab .tab-nav li.active {
 background: #fff;
 color: #777;
}
.tab .tab-nav li.active a {
 color: #777;
}
.tab .content {
 background: #fff;
 height: 200px;
 padding: 5px;
}
.tab .content-item {
 position: absolute;
 display: none;
}
.tab .content img {
 width: 290px;
 height: 200px;
}
.tab .content .current {
 display: block;
}

(function () {
 function Tab (tab)
 {
  this.tab = tab;
  var _this_ = this;
  // Default configuration parameters, attribute name is double quotes, otherwise parseJSON escape will fail this.config = {
   // Used to define the trigger type of the mouse, click or mouseover
   "triggerType": "mouseover",
   // Used to define the content switching effect, whether it is direct switching or fade-in and fade-out effect "effect": "default",
   // The default tab to display
   "invoke": 1,
   // Used to define whether the tab switches automatically and specify how long it takes to switch "auto": false
  }
  // If the configuration exists, extend the original configuration and merge with $.extend if (this.getConfig()) {
   $.extend(this.config, this.getConfig());
  }
  // Mouse trigger function var config = this.config; // Storage configuration, this.config will search every time this.liItem = this.tab.find('.tab-nav li'); // Get li
  this.contentItem = this.tab.find('.content div'); // Get content // Determine if it is click. . When operating, execute the invoke method to switch if (config.triggerType === 'click') {
   this.liItem.click(function () {
    _this_.invoke($(this));
   });
  } else {
   this.liItem.mouseover(function () {
    _this_.invoke($(this));
   });
  }

  // Automatic switching function if (this.config.auto) {
   this.timer = null;
   this.count = 0; // counter this.autoplay();
   // Stop when the mouse is above, and continue when it is moved away this.tab.hover(function () {
    clearInterval(_this_.timer); // this is this.tab
   }, function () {
    _this_.autoplay();
   })
  }

  // The default display number if (this.config.invoke > 1) {
   this.invoke(this.liItem.eq(this.config.invoke - 1)); // Direct switch}
 }

 Tab.prototype = {
  // Get configuration parameters getConfig: function () {
   //Take out the contents of data-config on the tab element var config = this.tab.attr('data-config');
   if (config && config != '') {
    return $.parseJSON(config); //Convert json object to js object} else {
    return null;
   }
  },
  // Get the passed li and switch invoke: function (li) {
   var index = li.index(); // Get the index of li var liItem = this.liItem;
   var contentItem = this.contentItem;
   
   li.addClass('active').siblings().removeClass('active'); // Add active to itself and remove other siblings // Fade in and out or default var effect = this.config.effect;
   if (effect === 'default') {
    contentItem.eq(index).addClass('current').siblings().removeClass('active');
   } else {
    contentItem.eq(index).fadeIn().siblings().fadeOut();
   }
   // When automatically switching, change count, otherwise start from the beginning each time this.count = index;
  },
  // Automatically switch autoplay: function () {
   var _this_ = this;
   var length = this.liItem.length; // Get length this.timer = setInterval(function() {  
    _this_.count ++; // count plus one, this is this.timer
    if (_this_.count >= length) {
     _this_.count = 0;
    }
    // Which li item triggers the event_this_.liItem.eq(_this_.count).trigger(_this_.config.triggerType);
   }, this.config.auto);
  }
 }

 window.Tab = Tab; // Register Tab as a window object, otherwise it cannot be accessed from outside})();

// Pass the first tab to the Tab class var tab = new Tab($('.tab').eq(0));

// Initialize through init Tab.init = function (tabs) {
  tabs.each(function () {
   new Tab($(this));
  });
 }

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

// Register as jQuery method $.fn.extend({
  tab: function () {
   this.each(function () { // Who called the tab method new Tab($(this)); // This this is the li that has been each
   });
   return this; // Chain operation}
 })

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