try.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <link rel="stylesheet" type="text/css" href="try.css">
  7.     <script type="text/javascript" src="script.js"></script>
  8. </head>
  9. <body>
  10. <div id="notice" class="notice">
  11.     <div class="notice-tit" id="notice-tit">
  12.         <ul>
  13.             <li><a href="#">公告</a></li>
  14.             <li><a href="#">规则</a></li>
  15.             <li><a href="#">论坛</a></li>
  16.             <li><a href="#">安全</a></li>
  17.             <li class="select"><a href="#">公益</a></li>
  18.         </ul>
  19.     </div>
  20.     <div id="notice-con" class="notice-con">
  21.         <div class="mod" style="display: none;">
  22.             <ul>
  23.                 <li><a href="#">张勇：玩快乐足球</a></li>
  24.                 <li><a href="#">张勇：玩快乐足球</a></li>
  25.                 <li><a href="#">张勇：玩快乐足球</a></li>
  26.                 <li><a href="#">张勇：玩快乐足球</a></li>
  27.             </ul>
  28.         </div>
  29.         <div class="mod" style="display: none;">
  30.             <ul>
  31.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  32.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  33.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  34.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  35.             </ul>
  36.         </div>
  37.         <div class="mod" style="display: none;">
  38.             <ul>
  39.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  40.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  41.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  42.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  43.             </ul>
  44.         </div>
  45.         <div class="mod" style="display: none;">
  46.             <ul>
  47.                 <li><a href="#">张勇：要玩快乐</a></li>
  48.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  49.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  50.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  51.             </ul>
  52.         </div>
  53.         <div class="mod" style="display: block;">
  54.             <ul>
  55.                 <li><a href="#">张勇：要玩快乐</a></li>
  56.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  57.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  58.                 <li><a href="#">张勇：要玩快乐</a></li>
  59.             </ul>
  60.         </div>
  61.     </div>
  62. </div>
  63. </body>
  64. </html>

try.css

  1. *{
  2.     margin: 0;
  3.     padding:0;
  4.     list-style: none;
  5.     font-size: 12px;
  6. }
  7. .notice{
  8.     width: 298px;
  9.     height: 98px;
  10.     margin: 10px;
  11.     border: 1px solid #eee;
  12.     overflow: hidden;
  13. }
  14. .notice-tit{
  15.     height: 27px;
  16.     position: relative;
  17.     background-color: #f7f7f7;
  18. }
  19. .notice-tit ul{
  20.     position: absolute;
  21.     width: 301px;
  22.     left: -1px;
  23. }
  24. .notice-tit ul li{
  25.     float: left;
  26.     width: 58px;
  27.     height: 26px;
  28.     text-align: center;
  29.     line-height: 26px;
  30.     overflow: hidden;
  31.     padding: 0 1px;
  32.     background: #f7f7f7;
  33.     border-bottom: 1px solid #eee;
  34.  
  35. }
  36. .notice-tit ul li.select{
  37.     background: #fff;
  38.     border-bottom-color: #fff;
  39.     border-left: 1px solid #eee;
  40.     border-right: 1px solid #eee;
  41.     padding: 0;
  42.     font-weight: bolder;
  43. }
  44. .notice li a:link,.notice-tit li a:visited{
  45.     text-decoration: none;
  46.     color: #000;
  47. }
  48. .notice li a:hover{
  49.     color: #f90;
  50. }
  51. .notice-con .mod{
  52.     margin: 10px 10px 10px 19px;
  53. }
  54. .notice-con .mod ul li{
  55.     float: left;
  56.     width: 134px;
  57.     height: 25px;
  58.     overflow: hidden;
  59. }

　　script.js

  1. function $(id){
  2. 	return typeof id==='string'?document.getElementById(id):id;
  3. }
  4.  
  5. window.onload=tab;
  6.  
  7. function tab(){
  8.  
  9.   var index=0;
  10.   var timer=null;
  11.  
  12.   var lis=$('notice-tit').getElementsByTagName('li');
  13.   var divs=$('notice-con').getElementsByTagName('div');
  14.  
  15.   for(var i=0;i<lis.length;i++){
  16.     lis[i].id=i;
  17.     lis[i].onmouseover=function(){
  18.       clearInterval(timer);
  19.       changeOption(this.id);
  20.     }
  21.     lis[i].onmouseout=function(){
  22.       timer=setInterval(autoPlay,2000);
  23.     }
  24.   }
  25.  
  26.   if(timer){
  27.     clearInterval(timer);
  28.     timer=null;
  29.   }
  30.   // ��Ӷ�ʱ�����ı䵱ǰ����������
  31.   timer=setInterval(autoPlay,2000);
  32.  
  33.   function autoPlay(){
  34.       index++;
  35.       if(index>=lis.length){
  36.          index=0;
  37.       }
  38.       changeOption(index);
  39.   }
  40.  
  41.   function changeOption(curIndex){
  42.     for(var j=0;j<lis.length;j++){
  43.        lis[j].className='';
  44.        divs[j].style.display='none';
  45.     }
  46.  
  47.     lis[curIndex].className='select';
  48.     divs[curIndex].style.display='block';
  49.     index=curIndex;
  50.   }
  51. }

　　效果：

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. php md5()函数 语法

    php md5()函数 语法 作用:字符串md5编码.dd马达价格 语法:md5(string,raw) 参数: 参数 描述 string     必需.规定要计算的字符串. raw     可选.规 ...

  2. php上传文件的原理

    文件上传原理 将客户端的文件上传到服务器,再将服务器的临时文件上传到指定目录 客户端配置 提交表单 表单的发送方式为post 添加enctype="multipart/form-data&q ...

  3. Intel CPU编号详解

    一.概述 Intel(英特尔)是当前最主流的台式机.笔记本.服务器CPU厂商.和英特尔类似的还有AMD厂商的CPU. Intel生产的CPU型号繁多,每个型号的CPU都有对应的编号.这个编号有特定意义 ...

  4. string 、char* 、 char []的转换

    1.string->char* (1)data string s = "goodbye"; const char* p=str.data(); (2)c_str() stri ...

  5. 循序渐进实现仿QQ界面（二）：贴图按钮的三态模拟

    开始之前先说一下RingSDK的编译问题,这里演示的程序需要用到最新版本的RingSDK,请务必用SVN到svn://svnhost.cn/RingSDK更新到最新版本,推荐用TortoiseSVN. ...

  6. java 简单指令说明

    javac:Java编译器,Java程序的编译工具,用来将Java程序的源文件编译成字节码文件,也就是.class文件.java:Java解释器,解释和执行已经转换成字节码的Java应用程序.jdb: ...

  7. webApp 页面布局

    1. 流式布局 概念:流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法:布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽然可以让各种屏幕适配,但是显 ...

  8. Skyline（6.x）-Web二次开发-多窗口对比

    GitHub 上获取源码 1. 打开个 3D 窗口 一个页面加载多个 TerraExplorer3DWindow 和 SGWorld 等只有第一个能用(即使用 iframe 也是一样) 所以我决定打开 ...

  9. Skyline（6.x）-二次开发手册使用技巧

    毕业设计选择 Skyline 的 Web 端二次开发,由于以前没有接触过 ActiveX 控件的使用,二次开发手册是英文的读起来有点吃力,并且 IE 直接控制台输出 ActiveX 控件创建的对象看不 ...

  10. 128、TensorFlow元数据MetaData

    #tf.Session.run也接收一个可选的参数options #能够让你来配置训练时的参数 #run_metadata参数让你能够收集关于训练的元信息 #列如你可以使用这些可选项来追踪执行的信息 ...