脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js简单选项卡与自动切换效果

js实现简单选项卡与自动切换效果的方法

 更新时间：2015年04月10日 11:51:49   作者：jingangel  
这篇文章主要介绍了js实现简单选项卡与自动切换效果的方法,涉及javascript操作选项卡与自动切换效果的实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下：

这里再上篇《js实现简单的可切换选项卡效果》基础上，进一步实现可以自动切换的切换效果，用这种效果就可以做简单的焦点图了。

说明：

设置一个标识数字置为0，写一个每过几秒标识+1,执行切换效果的函数，然后执行。
当标识超过当前选项卡长度让标识置为0。
在鼠标移到选项卡的时候关闭定时器，鼠标移走的时候打开定时器。

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

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • IE7提供XMLHttpRequest对象为兼容

    IE7提供XMLHttpRequest对象为兼容

    IE7提供XMLHttpRequest对象为兼容...
    2007-03-03
  • Web打印解决方案之普通报表打印功能

    Web打印解决方案之普通报表打印功能

    这篇文章主要介绍了Web打印解决方案之普通报表打印功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • Bootstrap输入框组件使用详解

    Bootstrap输入框组件使用详解

    这篇文章主要为大家详细介绍了Bootstrap输入框组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript下载后端返回的文件流的三种方法

    JavaScript下载后端返回的文件流的三种方法

    本文主要介绍了JavaScript下载后端返回的文件流的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • JS 参数传递的实际应用代码分析

    JS 参数传递的实际应用代码分析

    在项目中，有一个Ajax加载的区域，是一个Div标签，id为msg_box，这个控制链接包含在一个左侧的导航中，当从其他页面链接到这个页面时，该JS代码就失效了。
    2009-09-09
  • js实现一个链接打开两个链接地址的方法

    js实现一个链接打开两个链接地址的方法

    这篇文章主要介绍了js实现一个链接打开两个链接地址的方法,可实现连续打开两个链接的功能,非常简单实用的技巧,需要的朋友可以参考下
    2015-05-05
  • 浅谈javascript的Touch事件

    浅谈javascript的Touch事件

    在本文深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。
    2015-09-09
  • js中更短的 Array 类型转换

    js中更短的 Array 类型转换

    代码永远都是那么好玩，而 Trick 不断。那天张克军在 twitter 上说还有比 [].slice.call() 更短的 Array 转换么
    2011-10-10
  • Javascript中的prototype与继承

    Javascript中的prototype与继承

    本文主要介绍了Javascript中的prototype与继承，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • javascript实现淡蓝色的鼠标拖动选择框实例

    javascript实现淡蓝色的鼠标拖动选择框实例

    这篇文章主要介绍了javascript实现淡蓝色的鼠标拖动选择框,可实现鼠标拖动出现淡蓝色选择框的效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下
    2015-05-05

最新评论