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. Dubbo 在跨语言和协议穿透性方向的探索：支持 HTTP/2 gRPC

    Dubbo 在跨语言和协议穿透性方向上的探索:支持 HTTP/2 gRPC 和 Protobuf 本文整理自刘军在 Dubbo 成都 meetup 上分享的<Dubbo 在多语言和协议穿透性方向 ...

  2. php array_fill()函数 语法

    php array_fill()函数 语法 作用:用键值填充数组.大理石平台价格 语法:array_fill(index,number,value) 参数: 参数 描述 index 必需.被返回数组的 ...

  3. leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和]

    题目链接 Given a m x n matrix mat and an integer threshold. Return the maximum side-length of a square w ...

  4. linux vim设置和 快捷命令配置

    1.vim配置 set tabstop= set shiftwidth= set softtabstop= set fileencodings=utf-,ucs-bom,gb2312,gbk,gb18 ...

  5. 【HDOJ6695】Welcome Party（multiset）

    题意: n<=1e5,x[i],y[i]<=1e18 思路: #include<bits/stdc++.h> using namespace std; typedef long ...

  6. vue组件传值之父传子

    1.父组件给子组件传值  home父组件  header子组件  关键字props home代码 <template> <div> <v-header :title=&q ...

  7. 北风设计模式课程---备忘录（Memento）模式

    北风设计模式课程---备忘录(Memento)模式 一.总结 一句话总结: 备忘录模式也是一种比较常用的模式用来保存对象的部分用于恢复的信息,和原型模式有着本质的区别,广泛运用在快照功能之中.同样的使 ...

  8. Oracle-数据表对象

    表一般指的是一个关系表,也可以生成对象表以及临时表.齐总,对象表是通过用户定义的数据类型生成的,临时表用于存储专用于某个事务或会话的临时数据 字符类型: 定长:char (1-2000字节) 变长:v ...

  9. UI自动化之cookies登录

    现在有很多网站有验证码,跳过验证码实现登录可以使用cookies登录 目录 1.webdriver的添加cookies的方法 2.举个栗子 1.webdriver的添加cookies的方法 webdr ...

  10. SqlServer 索引和视图

    Ø 索引 1. 什么是索引 索引就是数据表中数据和相应的存储位置的列表,利用索引可以提高在表或视图中的查找数据的速度. 2. 索引分类 数据库中索引主要分为两类:聚集索引和非聚集索引.SQL Serv ...