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 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
js电话号码验证方法
Sep 28 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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使用数组实现队列
2012/02/05 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
js实现简单模态框实例
2018/11/16 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
高一化学教学反思
2014/02/05 职场文书
学生会主席竞聘书
2014/03/31 职场文书
捐款感谢信
2015/01/20 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
《迟到》教学反思
2016/02/24 职场文书