Schritt-für-Schritt-Analyse von JavaScript, um automatische Tab-Wechselfunktionen zu implementieren_Javascript-Fähigkeiten-js-Tutorial-php.cn

Dieser Artikel teilt eine Tab-Funktion, die das automatische Umschalten ermöglicht und den spezifischen Implementierungsprozess angibt.

Jeder muss mit Tabs vertraut sein. Sie werden sehr häufig verwendet, um zu wechseln.
Das Codebeispiel lautet wie folgt:

<html>
<head>
<meta charset=" utf-8">
<title>tab切换</title>
<style type="text/css">
body,h2,p{
 margin:0px;
 padding:0px;
}ul,li{
 margin:0px;
 padding:0px;
 float:left;
 list-style-type:none;
 }
body{font-size:12px;}
.box{
 width:722px;
 height:99px;
 margin:10px auto;
 border:1px solid #dedede;
}
.list{
 width:711px;
 height:22px;
 float:left;
 padding:4px 0 0 9px;
 border-top:1px solid #fff;
 border-left:1px solid #fff;
 border-right:1px solid #fff;
}
.list li{
 width:74px;
 height:22px;
 float:left;
 cursor:pointer;
 color:#656565;
 line-height:22px;
 text-align:center;
}
.list li.hove{
 width:72px;
 height:20px;
 color:#fc6703;
 line-height:20px;
 border-top:1px solid #dedede;
 border-left:1px solid #dedede;
 border-right:1px solid #dedede;
 border-bottom:1px solid #fff;
 background:#fff;
}
.content{
 width:722px;
 height:72px;
 float:left;
 display:none;
}
</style>
<script>
function $(id){
 return typeof id === "string" &#63; document.getElementById(id) : id;
}
 
function $$(oParent, elem){
 return (oParent || document).getElementsByTagName(elem);
}
 
function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
 if(aElem[index].className == sClass){
  aClass.push(aElem[index]);
 }
 }
 return aClass;
}
 
function addEvent(oElm, strEvent, fuc) {
 addEventListener&#63;oElm.addEventListener(strEvent,fuc,false):oElm.attachEvent('on'+strEvent,fuc);
};
function Tab(){
 this.initialize.apply(this, arguments);
}
 
 
Object.extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
};
 
Tab.prototype = {
 initialize : function(obj, dis, content, onEnd, eq){
 this.obj = $(obj);
 this.oList = $$$(this.obj, 'list')[0];
 this.aCont = $$$(this.obj, content);
 this.oUl = $$(this.oList, 'ul')[0];
 this.aLi = this.oUl.children;
 this.timer = null;
 eq &#63; (this.aLi.length < eq &#63; eq = 0 : eq) : eq = 0;
 this.oEve(onEnd);
 this.onEnd.method == 'mouseover' &#63; this.method = "mouseover" : this.method = "click";
 this.onEnd.autoplay == 'stop' &#63; this.autoplay = "stop" : this.autoplay = "play";
 this.aCont[eq].style.display = 'block';
 this.aLi[eq].className = 'hove';
 this.display(dis);
 this.autoPlayTab(eq, dis);
 },
 oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
 },
 display : function(dis){
 var _this = this;
 var index = iNow = 0;
 for(index=0;index<_this.aLi.length;index++){
  (function(){
  var j = index;
  addEvent(_this.aLi[j], _this.method,
  function() {
   _this.fnClick(j,dis);
   _this.autoPlayTab(j, dis);
  })
  })()
 }
 },
 autoPlayTab : function(iNow, dis){
 if(this.autoplay == 'play'){
  var _this = this;
  this.iNow = iNow;
  this.obj.onmouseover = function(){
  clearInterval(_this.timer);
  };
  this.obj.onmouseout = function(){
  _this.timer = setInterval(playTab,5000);
  };
  clearInterval(_this.timer);
  _this.timer = setInterval(playTab,5000);
  function playTab(){
  if(_this.iNow == _this.aLi.length)_this.iNow = 0;
  _this.fnClick(_this.iNow, dis)
  _this.iNow++
  }
 }
 },
 fnClick : function(oBtn, dis){
 var index = 0;
 for(index=0;index<this.aLi.length;index++){
  this.aLi[index].className = '';
  this.aCont[index].style.display = 'none';
 }
 this.aLi[oBtn].className = dis;
 this.aCont[oBtn].style.display = 'block';
 }
};
window.onload = function(){
 new Tab("box", 'hove', 'content', {
 method : 'mouseover',
 autoplay : 'play'
 },0);
};
</script>
</head>
<body>
<div id="box" class="box">
 <div class="list">
 <ul>
  <li>div教程</li>
  <li>jquery教程</li>
  <li>css教程</li>
 </ul>
 </div>
 <div class="content">蚂蚁部落欢迎您</div>
 <div class="content">本站url地址是softwhy.com</div>
 <div class="content">只有努力才会有美好的未来</div>
</div>
</body>
</html>

Nach dem Login kopieren

Der obige Code erfüllt unsere Anforderungen. Hier finden Sie eine Einführung in seinen Implementierungsprozess.
(1) Simulieren Sie den ID-Selektor in jQuery. Der Parameter ist der ID-Attributwert des Elements

Funktion $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}

(2).function $$(oParent, elem){
Return (oParent || document).getElementsByTagName(elem);
}, diese Funktion implementiert die Objektsammlung aller spezifischen Elemente unter dem angegebenen Element.
(3). Die Funktion dieser Funktion besteht darin, alle Elemente mit dem Klassenattributwert sClass unter dem oParent-Element im Array

zu speichern

function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
  if(aElem[index].className == sClass){
   aClass.push(aElem[index]);
  }
 }
 return aClass;
}

Nach dem Login kopieren

(4) Bindungskapselung von Ereignisverarbeitungsfunktionen, um Browserkompatibilität zu erreichen.

.function addEvent(oElm, strEvent, fuc) {
 addEventListener&#63;oElm.addEventListener(strEvent,fuc,false) : oElm.attachEvent('on'+strEvent,fuc);
}

Nach dem Login kopieren

(5) Diese Methode implementiert grundlegende Initialisierungsvorgänge

function Tab(){ this.initialize.apply(this, arguments);
}

Nach dem Login kopieren

(6). Die Funktion zum Zusammenführen von Objekten wurde implementiert. Sie können beispielsweise die Attribute in Objekt a mit Objekt b zusammenführen

Object.extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
 return destination;
}

Nach dem Login kopieren

(7).Tab.prototype = {}, legt das Prototypobjekt des Tab-Konstruktors fest.
(8).initialize: function(obj, dis, content, onEnd, eq){}, diese Methode kann einige Initialisierungsvorgänge ausführen. Der erste Parameter ist der Wert des Element-ID-Attributs, der zweite Parameter ist die Klassenstilklasse, der dritte Parameter ist der Klassenstilklassenname des Inhalts-Div und der vierte Parameter ist ein Objektliteral, in dem einige verwandte Parameter gespeichert sind Geben Sie an, welche Registerkarte standardmäßig ausgewählt ist, also eine Zahl.
(9).this.obj = $(obj), holen Sie sich das angegebene Elementobjekt.
(10).this.oList = $$$(this.obj, 'list')[0], ruft das äußere div-Element des Titels ab, dessen Klassenattributwert list ist.
(11).this.aCont = $$$(this.obj, content), ruft die Sammlung von Tab-Inhaltselementen ab.
(12).this.oUl = $$(this.oList, 'ul')[0], holen Sie sich das Titel-ul-Element.
(13).this.aLi = this.oUl.children, alle untergeordneten Elemente unter dem ul-Element abrufen.
(14).this.timer = null, wird als Bezeichner der Timer-Funktion verwendet.
(15).eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0, wenn eq 0 ist, verwenden Sie 0, andernfalls wird der von eq übergebene Wert verwendet und der eq-Wert muss verwendet werden kleiner als die Array-Länge sein, andernfalls wird der eq-Wert auf 0 gesetzt.
(16).this.oEve(onEnd), überschreibt die Standardeinstellungen.
(17).this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click", bestimmen Sie, ob es sich um ein Mouseover-Ereignis oder ein Klick-Ereignis handelt.
(18).this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play", die Standardeinstellung ist automatische Wiedergabe, andernfalls erfolgt keine automatische Wiedergabe.
(19).this.aCont[eq].style.display = 'block', das Standardinhaltselement wird angezeigt.
(20).this.aLi[eq].className = 'hove', legen Sie den entsprechenden Titel-Tab-Stil fest.
(21).this.display(dis), registrieren Sie die Event-Handler-Funktion, der Parameter ist ein Stilklassenname.
(22).this.autoPlayTab(eq, dis), führen Sie diese Funktion aus, um sicherzustellen, dass die Registerkarte automatisch umgeschaltet werden kann, wenn das automatische Umschalten zulässig ist.
(23).

wird zum Zusammenführen von Objekten

verwendet

oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
}

Nach dem Login kopieren

Dies ist die Standardeinstellung

this.onEnd = {
 method: 'mouseover',
 autoplay: 'stop',
}

Nach dem Login kopieren

Wenn das Onend-Objekt übergeben wird, führen Sie es mit dem Standardobjekt zusammen, andernfalls führen Sie es mit einem leeren Objekt zusammen

Object.extend(this.onEnd, onEnd || {})

Nach dem Login kopieren

(24).display: function(dis){}, Ereignisverarbeitungsfunktion registrieren, der Parameter ist ein Stilklassenname.
(25).var _this = this, weisen Sie dies der Variablen _this zu. Warum dies geschieht, wird später erläutert. (26).var index = iNow = 0, einige Initialisierungsvorgänge durchführen.
(27).for(index=0;index<_this.aLi.length;index){}, registrieren Sie die Ereignisverarbeitungsfunktion durch For-Schleifendurchquerung.
(28)

.(function(){ var j = index;
 addEvent(_this.aLi[j], _this.method,
 function() {
  _this.fnClick(j,dis);
  _this.autoPlayTab(j, dis);
 })
})()

Nach dem Login kopieren

使用匿名自执行函数，其实就是形成了一个闭包。
之所以用闭包，是为了隔离匿名函数内部的index值和外部的index值。
之所以将this赋值给_this是因为，事件处理函数中的this是指向元素li的，而不是指向Tab()构造函数的对象实例。
（29）.autoPlayTab : function(iNow, dis){}，此函数实现了自动切换功能，第一个参数规定当前选项卡切换所处的索引位置，第二个参数一个样式类名称，就是设置处于当前状态的样式。
（30）.if(this.autoplay == 'play'){}，判断是否允许自动切换。
（31）.var _this = this,将this赋值给变量_this，原理和上面是一样的。
（32）.this.iNow = iNow，进行赋值操作。
（33）.this.obj.onmouseover = function(){
clearInterval(_this.timer);
}，当鼠标悬浮的时候的时候停止定时器函数的执行，其实也就是停止自动切换。

（34）.当鼠标离开的时候，开始自动切换动作

this.obj.onmouseout = function(){
 _this.timer = setInterval(playTab,5000);
}

Nach dem Login kopieren

（35）.clearInterval(_this.timer)，停止以前的定时器函数执行。
（36）._this.timer = setInterval(playTab,5000)，开始自动切换。
（37）.

function playTab(){
 if(_this.iNow == _this.aLi.length)_this.iNow = 0;
 _this.fnClick(_this.iNow, dis)
  _this.iNow++

}

Nach dem Login kopieren

不断调用此函数就实现了自动切换功能。
如果当前的索引等于li元素的个数，那么就将其设置为0，也就是从头进行新一轮切换。
然后调用对应的方法，并且让索引值自增。

（38）实现了选项卡的切换显示隐藏和样式设置效果

.fnClick : function(oBtn, dis){
  var index = 0;
  for(index=0;index<this.aLi.length;index++){
   this.aLi[index].className = '';
   this.aCont[index].style.display = 'none';
  }
  this.aLi[oBtn].className = dis;
  this.aCont[oBtn].style.display = 'block';
 }

Nach dem Login kopieren

以上就是本文的全部内容，希望对大家的学习有所帮助。