recherche

Maison >interface Web >js tutoriel >Comment implémenter des onglets simples et des effets de commutation automatique dans les compétences js_javascript

Comment implémenter des onglets simples et des effets de commutation automatique dans les compétences js_javascript

WBOY
WBOYoriginal
2016-05-16 16:04:521077parcourir

L'exemple de cet article décrit comment implémenter des onglets simples et des effets de commutation automatique dans js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Sur la base de l'article précédent "JS implémente un effet d'onglet commutable simple", nous implémentons ici en outre un effet de commutation qui peut basculer automatiquement. Avec cet effet, vous pouvez créer une simple carte de focus.

Description :

Définissez un numéro d'identification sur 0, écrivez une fonction qui identifie 1 toutes les quelques secondes, exécutez l'effet de commutation, puis exécutez-le.
Définissez l'indicateur sur 0 lorsqu'il dépasse la longueur de l'onglet actuel.
Éteignez la minuterie lorsque la souris se déplace sur l'onglet et activez la minuterie lorsque la souris s'éloigne. 

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de scrollTop dans les compétences javascript_javascriptArticle suivant：Explication détaillée de scrollTop dans les compétences javascript_javascript

Articles Liés

Voir plus