So implementieren Sie einfache Tabs und automatische Umschalteffekte in js_javascript-Kenntnissen-js-Tutorial-php.cn

So implementieren Sie einfache Tabs und automatische Umschalteffekte in js_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 16:04:52

Original

1091 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie einfache Tabs und automatische Umschalteffekte in js implementiert werden. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Basierend auf dem vorherigen Artikel „JS implementiert einfachen umschaltbaren Tab-Effekt“ implementieren wir hier zusätzlich einen Umschalteffekt, der automatisch umschalten kann. Mit diesem Effekt können Sie eine einfache Fokuskarte erstellen.

Beschreibung:

Setzen Sie eine Identifikationsnummer auf 0, schreiben Sie eine Funktion, die alle paar Sekunden 1 identifiziert, führen Sie den Schalteffekt aus und führen Sie ihn dann aus.
Setzen Sie das Flag auf 0, wenn es die Länge des aktuellen Tabs überschreitet.
Schalten Sie den Timer aus, wenn sich die Maus über die Registerkarte bewegt, und schalten Sie den Timer ein, wenn sich die Maus wegbewegt.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{
margin:0;
padding:0;
font:12px/1.5 arial;
}
ul,li{
list-style:none;
}
.wrap{
width:500px;
margin:20px auto;
}
.hide{
display:none;
}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  var timer = null;
  var num=0;
   for(i=0; i<len; i++){
    tab_t_li[i].index = i;
    tab_t_li[i][evt] = function(){
     clearInterval(timer);
     num = this.index;
     tab_change()
    }
    tab_t_li[i].onmouseout = function(){
     autoplay();
    }
   }
  function tab_change(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[num].className = 'act';
   tab_c_li[num].className = '';
  }
  function autoplay(){
   timer = setInterval(function(){
    num++;
    if(num>=len) num=0;
    tab_change();
   },1000);
  }
  autoplay();
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.