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 ...

随机推荐

[super class]和[self class]
参考: https://www.jianshu.com/p/3f2bcc588b44?utm_campaign=hugo&utm_medium=reader_share&utm_con ...
Spring学习总结（1）- IOC
一.Spring框架概述 Spring是一个开源免费的框架,为了解决企业应用开发的复杂性而创建.Spring框架是一个轻量级的解决方案,可以一站式地构建企业级应用.Spring是模块化的,所以可以只使 ...
4，fail-fast错误机制
一,fail-fast简介在JDK的Collection中我们时常会看到类似于这样的话: ArrayList 注意,迭代器的快速失败行为无法得到保证,因为一般来说,不可能对是否出现不同步并发修改做出 ...
顺序表 C++ 类模板实现
顺序表的C++语言描述基本运算的算法——置空表.求表的长度.取结点.定位运算.插入运算.删除运算.建立顺序表.输出顺序表 #include <iostream>using namespa ...
hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题
APP打包工具:hbuilder 需要js包:mui.js ,引入方法https://www.cnblogs.com/v616/p/11290281.html 实现原理:在vue根组件App.vue监 ...
php strtotime,mktime,DateTime函数处理时间累加问题
时间戳(年月日时分秒) 使用strtotime函数,结合+1 month,-1 month,next month,last month的时候会出现一些问题. demo示例: //时间"20 ...
Elasticsearch6.5安装&&常见问题与答案解释
ElasticSearch是一个用Java开发的基于Lucene的搜索服务器.它可以提供一个分布式多用户能力的全文搜索引擎,基于RESTfulweb接口.现阶段它主要为Apache许可条款下的开放源码 ...
ruby在类中访问@，类外访问调用方法
class Box def initialize(w,h) @width,@height=w,h end def printWidth puts @width end def printHeight ...
Bootstrap 学习笔记9 标签页和工具提示插件
<ul class="nav nav-tabs"> <li class="active"><a href="#html5 ...
HttpUrlConnection工具类
package com.ligotop.core.utils; import com.ligotop.core.exceptions.BusinessException; import java.io ...

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

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

随机推荐

热门专题

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

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