try.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="try.css">

    <script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="notice" class="notice">

    <div class="notice-tit" id="notice-tit">

        <ul>

            <li><a href="#">公告</a></li>

            <li><a href="#">规则</a></li>

            <li><a href="#">论坛</a></li>

            <li><a href="#">安全</a></li>

            <li class="select"><a href="#">公益</a></li>

        </ul>

    </div>

    <div id="notice-con" class="notice-con">

        <div class="mod" style="display: none;">

            <ul>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><a href="#">张勇：要玩快乐</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: block;">

            <ul>

                <li><a href="#">张勇：要玩快乐</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐</a></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

try.css

*{

    margin: 0;

    padding:0;

    list-style: none;

    font-size: 12px;

}

.notice{

    width: 298px;

    height: 98px;

    margin: 10px;

    border: 1px solid #eee;

    overflow: hidden;

}

.notice-tit{

    height: 27px;

    position: relative;

    background-color: #f7f7f7;

}

.notice-tit ul{

    position: absolute;

    width: 301px;

    left: -1px;

}

.notice-tit ul li{

    float: left;

    width: 58px;

    height: 26px;

    text-align: center;

    line-height: 26px;

    overflow: hidden;

    padding: 0 1px;

    background: #f7f7f7;

    border-bottom: 1px solid #eee;

}

.notice-tit ul li.select{

    background: #fff;

    border-bottom-color: #fff;

    border-left: 1px solid #eee;

    border-right: 1px solid #eee;

    padding: 0;

    font-weight: bolder;

}

.notice li a:link,.notice-tit li a:visited{

    text-decoration: none;

    color: #000;

}

.notice li a:hover{

    color: #f90;

}

.notice-con .mod{

    margin: 10px 10px 10px 19px;

}

.notice-con .mod ul li{

    float: left;

    width: 134px;

    height: 25px;

    overflow: hidden;

}

　　script.js

function $(id){

	return typeof id==='string'?document.getElementById(id):id;

}

window.onload=tab;

function tab(){

  var index=0;

  var timer=null;

  var lis=$('notice-tit').getElementsByTagName('li');

  var divs=$('notice-con').getElementsByTagName('div');

  for(var i=0;i<lis.length;i++){

    lis[i].id=i;

    lis[i].onmouseover=function(){

      clearInterval(timer);

      changeOption(this.id);

    }

    lis[i].onmouseout=function(){

      timer=setInterval(autoPlay,2000);

    }

  }

  if(timer){

    clearInterval(timer);

    timer=null;

  }

  // ��Ӷ�ʱ�����ı䵱ǰ����������

  timer=setInterval(autoPlay,2000);

  function autoPlay(){

      index++;

      if(index>=lis.length){

         index=0;

      }

      changeOption(index);

  }

  function changeOption(curIndex){

    for(var j=0;j<lis.length;j++){

       lis[j].className='';

       divs[j].style.display='none';

    }

    lis[curIndex].className='select';

    divs[curIndex].style.display='block';

    index=curIndex;

  }

}

　　效果：

2017-09-05  20:45:21

Tab选项卡 自动切换效果js实现的更多相关文章

  1. Tab选项卡 延迟切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  3. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  4. 【Little Demo】左右按钮tab选项卡双切换

    通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

  5. HTML+JS+DOM【选项卡自动切换】

    最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...

  6. [C#]Winform下回车或Tab键自动切换下一个控件焦点

    满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...

  7. 旋转木马幻灯片切换效果JS源码详解

    首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...

  8. 自动切换的JS菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=&quo ...

  9. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

随机推荐

  1. 06 IntelliJ IDEA构建多模块项目

  2. macOS 10.15 Catalina Apache设置：多个PHP版本

    第1部分:macOS 10.15 Catalina Web开发环境 在macOS上开发Web应用程序真是令人高兴.有许多设置开发环境的选项,包括广受欢迎的MAMP Pro,它在Apache,PHP和M ...

  3. data_model_action

    w PowerDesigner

  4. Jenkins使用三：管理slave节点（配置SSH公钥和私钥）

    添加slave 给节点起个名字 1.远程工作目录:/test/workspace--这个地址是测试机的 jenkins 的 workspace 工作目录,自己随便写个本机的路径2.用法--尽可能的使用 ...

  5. ArrayList 源码解读

    ArrayList 源码解读     基于JDk 1.7.0_80 public class ArrayList<E> extends AbstractList<E> impl ...

  6. 把Notepad++的tab设置为四个空格

    在7.1版本以及以后 设置->首选项->Language 勾选Repalce by space 在7.1版本以前 设置->首选项->制表符设置 右侧,转为空格,勾选上 参考: ...

  7. 20190823 尚硅谷MySQL核心技术

    背景 视频时间:2017.09 MySQL版本:5.5 MySQL基础 命令行启动.停止MySQL: net start MySQL(这里是注册的服务名称) net stop MySQL 命令行连接M ...

  8. HTMLTestRunner下载生成报告

    HTMLTestRunner下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html,选择HTMLTestRunner.py下载 2.打开显示这 ...

  9. 爬虫（五）—— 解析库（二）beautiful soup解析库

    目录 解析库--beautiful soup 一.BeautifulSoup简介 二.安装模块 三.Beautiful Soup的基本使用 四.Beautiful Soup查找元素 1.查找文本.属性 ...

  10. [Linux] 019 软件包管理简介

    1. 软件包分类 源码包 脚本安装包 二进制包(RPM 包.系统默认包) 2. 源码包 (1)源码包的优点 开源,如果有足够的能力,可以修改源代码 可以自由选择所需的功能 软件是编译安装,所以更加适合 ...