Rumah > Artikel > hujung hadapan web > Menghuraikan JavaScript langkah demi langkah untuk melaksanakan kemahiran fungsi_javascript penukaran tab automatik

Menghuraikan JavaScript langkah demi langkah untuk melaksanakan kemahiran fungsi_javascript penukaran tab automatik

WBOYasal: 2016-05-16 15:18:261237semak imbas

Artikel ini berkongsi fungsi tab yang mendayakan penukaran automatik dan memberikan proses pelaksanaannya yang khusus.

Semua orang mesti biasa dengan tab. Biasanya, tab perlu diklik atau dileret untuk bertukar.
Contoh kod adalah seperti berikut:

<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>

Kod di atas mencapai keperluan kami Berikut ialah pengenalan kepada proses pelaksanaannya.
(1) Simulasikan pemilih id dalam jQuery, parameter ialah nilai atribut id bagi elemen

fungsi $(id){
kembalikan jenis id === "rentetan" ? document.getElementById(id) : id;
}

(2).fungsi $$(oIbu bapa, elem){
Kembalikan (oParent || document).getElementsByTagName(elem);
}, fungsi ini melaksanakan koleksi objek semua elemen tertentu di bawah elemen yang ditentukan.
(3). Fungsi fungsi ini adalah untuk menyimpan semua elemen dengan nilai atribut kelas sClass di bawah elemen oParent ke dalam tatasusunan

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;
}

(4) Mengikat enkapsulasi fungsi pemprosesan acara untuk mencapai keserasian penyemak imbas.

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

(5). Kaedah ini melaksanakan operasi permulaan asas

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

(6) Melaksanakan fungsi menggabungkan objek, sebagai contoh, anda boleh menggabungkan atribut dalam objek a menjadi objek b

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

(7).Tab.prototype = {}, tetapkan objek prototaip pembina Tab.
(8).initialize: function(obj, dis, content, onEnd, eq){}, kaedah ini boleh melaksanakan beberapa operasi pemula. Parameter pertama ialah nilai atribut id elemen, parameter kedua ialah kelas gaya kelas, parameter ketiga ialah nama kelas gaya kelas div kandungan, parameter keempat ialah literal objek, yang menyimpan beberapa parameter yang berkaitan tentukan tab mana yang dipilih secara lalai, iaitu nombor.
(9).this.obj = $(obj), dapatkan objek elemen yang ditentukan.
(10).this.oList = $$$(this.obj, 'list')[0], dapatkan tajuk elemen div luar yang nilai atribut kelasnya ialah senarai.
(11).this.aCont = $$$(this.obj, kandungan), memperoleh koleksi elemen kandungan tab.
(12).this.oUl = $$(this.oList, 'ul')[0], dapatkan elemen ul tajuk.
(13).this.aLi = this.oUl.children, dapatkan semua elemen child di bawah elemen ul.
(14).this.timer = null, digunakan sebagai pengecam fungsi pemasa.
(15).eq ? (this.aLi.length < eq ? eq = 0 : eq): eq = 0, jika eq ialah 0, gunakan 0, jika tidak nilai yang dilalui oleh eq akan digunakan, dan nilai eq mesti kurang daripada panjang tatasusunan , jika tidak nilai eq ditetapkan kepada 0.
(16).this.oEve(onEnd), mengatasi tetapan lalai.
(17).this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click", tentukan sama ada ia adalah acara mouseover atau acara klik.
(18).this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play", lalai ialah main automatik, jika tidak, ia tidak akan menjadi main automatik.
(19).this.aCont[eq].style.display = 'block', item kandungan lalai dipaparkan.
(20).this.aLi[eq].className = 'hove', tetapkan gaya tab tajuk yang sepadan.
(21).this.display(dis), daftarkan fungsi pengendali acara, parameter ialah nama kelas gaya.
(22).this.autoPlayTab(eq, dis), jalankan fungsi ini untuk memastikan tab boleh ditukar secara automatik apabila penukaran automatik dibenarkan.
(23).

digunakan untuk menggabungkan objek

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

Ini ialah tetapan lalai

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

Jika objek satu dilalui, cantumkannya ke dalam objek lalai, jika tidak cantumkannya menjadi objek kosong

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

(24).paparan: function(dis){}, daftar fungsi pemprosesan acara, parameter ialah nama kelas gaya.
(25).var _this = ini, tetapkan ini kepada pembolehubah _ini, mengapa ini dilakukan akan diperkenalkan kemudian. (26).var index = iNow = 0, lakukan beberapa operasi pemula.
(27).for(index=0;index<_this.aLi.length;index){}, daftarkan fungsi pemprosesan acara melalui untuk lintasan gelung.
(28)

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

使用匿名自执行函数，其实就是形成了一个闭包。
之所以用闭包，是为了隔离匿名函数内部的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);
}

（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++

}

不断调用此函数就实现了自动切换功能。
如果当前的索引等于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';
 }

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript asli melaksanakan kemahiran effect_javascript bar skrolArtikel seterusnya：JavaScript asli melaksanakan kemahiran effect_javascript bar skrol

Artikel berkaitan

Lihat lagi