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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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出错界面
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python中的列表知识点汇总
2015/04/14 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python3.7.0的安装步骤
2018/08/27 Python
python交换两个变量的值方法
2019/01/12 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python实现机器人卡牌
2019/10/06 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
用python实现一个简单的验证码
2020/12/09 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
授权委托书范本
2014/04/03 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
财务工作失职检讨书
2014/11/21 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
asyncio异步编程之Task对象详解
2022/03/13 Python