Tab选项卡自动切换效果js实现

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实现的更多相关文章

Tab选项卡延迟切换效果js实现
try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览源码下载实现的代码. html代码: ...
【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章从简单的Tab标签到Tab图片切换的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
HTML+JS+DOM【选项卡自动切换】
最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...
[C#]Winform下回车或Tab键自动切换下一个控件焦点
满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...
旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
自动切换的JS菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=&quo ...
无JavaScript实现选项卡轮转切换效果
CSS: .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

随机推荐

python 3.6连接数据库（pymysql方式）
pymysql 模块可以通过 pip 安装.但如果你使用的是 pycharm IDE,则可以使用 project python 安装第三方模块. [File] >> [settings] ...
BZOJ 2726: [SDOI2012]任务安排斜率优化 + 凸壳二分 + 卡精
Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...
PKU P2411 Mondriaan's Dream
PKU P2411 Mondriaan's Dream 题目描述: Squares and rectangles fascinated the famous Dutch painter Piet Mo ...
批量搞机（一）：ansible简介、ansible安装
一.ansible简介 Ansible是2013年推出的一款IT自动化和DevOps软件,目前由Redhat已签署Ansible收购协议.其是基于Python研发,糅合了很多老运维工具的优点实现了批量 ...
十一、atomic、async深入
一.原子操作 g++; g+=1; g = g+1;//结果不对一般原子操作针对++,--,+=,&=,|=,^=是支持的,其他的可能不支持二.std::async深入用来创建异步任务. ...
FCC 成都社区·前端周刊第 10 期
1. Node.js 10 正式发布在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复.这是自 Node.js Foundation 开展以来的第七个主要版本,并将在 2018 ...
（转）YAML最最基础语法
转:https://blog.csdn.net/vincent_hbl/article/details/75411243 正如YAML所表示的YAML Ain’t Markup Language,YA ...
Java常用工具——java字符串
一.String常用字符串 package com.imooc.string; public class StringDemo { public static void main(String[] a ...
BurpSuite从下载安装到配置使用
为解决一个XSS安全问题,第一次使用BurpSuite,记录一下下载安装到配置使用的过程,希望能对第一次使用该工具的朋友有所帮助. 一.下载及安装直接百度下载破解版,我下的版本是burpsuite_ ...
Delphi 文件转换Base64
uses EncdDecd; function FileToBase64(FileName: string): string; var MemoryStream: TMemoryStream;beg ...

Tab选项卡 自动切换效果js实现

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

随机推荐

热门专题

Tab选项卡自动切换效果js实现

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