首页 > 前端特效js代码大全 > 选项卡自动切换代码|自动轮播js源码

选项卡自动切换代码|自动轮播js源码

发布-网页培训班 | 浏览量-

选项卡自动切换代码

 

直接复制代码另存html即可查看效果:查看效果

相关文档推荐:setInterval()定时函数学习工作总结

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选项卡自动切换-35ui.cn</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
body {
 font-size:12px;
 line-height:22px;
}
ul, li {
 list-style:none;
}
.tab {
}
.tab li {
 width:100px;
 font-size:14px;
 height:25px;
 line-height:25px;
 text-align:center;
 border:1px solid #999;
 background:#CCC;
 float:left;
 margin:100px 0 0 10px;
 cursor:pointer;
}
.tab li.active {
 background:#f60;
 color:#fff;
 font-weight:bold;
}
#content {
 clear:both;
 padding:50px 0 0 100px;
}
#content li {
 display:none;
}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oBox=document.getElementById('box')
 var oTab=document.getElementById('tab')
 var aTabli=oTab.getElementsByTagName('li')
 var oCon=document.getElementById('content')
 var aConli=oCon.getElementsByTagName('li')
 
 
 var i=0;
 var timer=null;
 var iNow=0;
 
 for(i=0;i<aTabli.length;i++)
 {
  aTabli[i].index=i;
  
  aTabli[i].onclick=function()
  {
   iNow=this.index;
      tab();
  }
 }
 
 function tab()
 {
  for(i=0;i<aTabli.length;i++)
  {
  aTabli[i].className=''  
  aConli[i].style.display='none' 
  }
  aTabli[iNow].className='active' 
  aConli[iNow].style.display='block'
 }
 function next()
 {
  iNow++
  if(iNow==aTabli.length) 
  {
   iNow=0; 
  }
  tab();
  
     }
  timer=setInterval(next,1000)
  oBox.onmouseover=function()
  {
  clearInterval(timer)
  };
   oBox.onmouseout=function()
  {
   timer=setInterval(next,1000)
  };
 
 
 
 
 
 
 }
</script>
</head>
<body>
<div id="box">
  <ul class="tab" id="tab">
    <li class="active">标题1</li>
    <li>标题2</li>
    <li>标题3</li>
  </ul>
  <ul id="content">
    <li style="display:block;">对应标题111111</li>
    <li>对应标题222222</li>
    <li>对应标题33333</li>
  </ul>
</div>
</body>
</html>
 

 

 

原文地址:http://www.35ui.cn/post/201101025886.html

标签自动轮播源码轮播代码选项卡自动切换代码选项卡自动切换代码

上一条: div层绝对底部代码推荐
下一条: js选项卡代码带上一个和下一个选项卡代码

或许你还对下面的文章感兴趣
  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码