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


Posted in Javascript onApril 10, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
js实现星星打分效果的方法
Jul 05 #Javascript
js实现简单的可切换选项卡效果
Apr 10 #Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 #Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
You might like
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python游戏开发的五个案例分享
2020/03/09 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
竞职演讲稿范文
2014/01/11 职场文书
小学数学教学反思
2014/02/02 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
入党积极分子评语
2014/05/04 职场文书
工地质量标语
2014/06/12 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
公诉意见书范文
2015/06/05 职场文书
失恋33天观后感
2015/06/11 职场文书