<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>简洁Tab</title>

<style type="text/css">

<!--

body, div, ul, li {padding:0;text-align:center;}

body {font:12px "宋体";text-align:center;}

a:link {color:#00F;text-decoration:none;}

a:visited {color: #00F;text-decoration:none;}

a:hover {color: #c00;text-decoration:underline;}

ul {list-style:none;}

/*选项卡1*/

#Tab1 {width:900px;margin:0px;padding:0px;margin:0 auto;}

/*菜单class*/

.Menubox {width:100%;background:url();height:28px;line-height:28px;}

.Menubox ul {margin:0px;padding:0px;}

.Menubox li {float:left;display:block;cursor:pointer;width:114px;text-align:center;color:#949694;font-weight:bold;}

.Menubox li.hover {padding:0px;background:#fff;width:116px;border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url

();color:#739242;font-weight:bold;height:27px;line-height:27px;}

.Contentbox {clear:both;margin-top:0px;border:1px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;}

-->

</style>

</head>

<body>

<br>

<br>

<div id="Tab1">

    <div class="Menubox">

        <ul>

            <li id="one0" onmouseover="setTab('one',0,7)"  class="hover">新闻1</li>

            <li id="one1" onmouseover="setTab('one',1,7)" >新闻2</li>

            <li id="one2" onmouseover="setTab('one',2,7)">新闻3</li>

            <li id="one3" onmouseover="setTab('one',3,7)">新闻4</li>

            <li id="one4" onmouseover="setTab('one',4,7)">新闻5</li>

            <li id="one5" onmouseover="setTab('one',5,7)">新闻6</li>

            <li id="one6" onmouseover="setTab('one',6,7)">新闻7</li>

        </ul>

    </div>

</div>

<br>

<script>

<!--

/*第一种形式 第二种形式 更换显示样式*/

var index;

function setTab(name,cursel,n){

    for(var i=0;i<n;i++){

        var menu=document.getElementById(name+i);

        menu.className=i==cursel?"hover":"";

                              if (menu.className=="hover")

                                  iindex=i;

    }

}

var num=0;

var AutoPlayObj=null;

function d()

    {

        setTab('one',num%7,7);

        num++;

    }

function AutoPlay()

    {

        clearInterval(AutoPlayObj);

        AutoPlayObj=setInterval('d()',500)

    };

AutoPlay();

var tab1 = document.getElementById("Tab1");

tab1.onmouseover = function (){

num=index;

clearInterval(AutoPlayObj);

}

tab1.onmouseout = function(){AutoPlay();}

//-->

</script>

</body>

</html>

自动切换的JS菜单的更多相关文章

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

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

  2. 原生 JS 实现 VS Code 自动切换输入法状态！这次没有AHK

    上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...

  3. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

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

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

  5. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. 原生js实现随着滚动条滚动，导航会自动切换的效果

    最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

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

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

  8. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  9. jquery叠加页片自动切换特效

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

随机推荐

  1. OAF与XML Publisher集成(转)

    原文地址:OAF与XML Publisher集成 有两种方式,一种是用VO与XML Publisher集成,另一种是用PL/SQL与XML Publisher集成 用VO与XML Publisher集 ...

  2. JS 之高级函数

    作用域安全的构造函数 当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例.如果不使用new,直接调用的话,则this对象会映射到window对象上.所以需要判断下. eg: f ...

  3. 实验5 简单嵌入式WEB服务器实验 实验报告 20135303 20135326

    北京电子科技学院(BESTI) 实     验    报     告 课程:信息安全系统设计基础                班级:  1353 姓名:20135303 魏昊卿 学号:2013532 ...

  4. 小白学习mysql之优化基础（EXPLAIN的连接类型）

    ## 导语很多情况下,有很多人用各种select语句查询到了他们想要的数据后,往往便以为工作圆满结束了.这些事情往往发生在一些学生亦或刚入职场但之前又没有很好数据库基础的小白身上,但所谓闻道有先后,只 ...

  5. Angularjs 异步模块加载项目模板

    ng-lazy-module-seed(Angularjs 异步模块加载项目模板) 相信做过SPA项目的朋友都遇到过这个问题:页面初始化时需要加载文件太大或太多了,许多文件加载后很可能不会运行到,这是 ...

  6. 定一个小目标：明年1024能成功转行web前端，光荣地成为一个程序员！

    第一次在博客园写博,我为什么要选择这里吗? 据说博客园这里的IT大牛如云,作为一个求知若渴的小白,我屁颠屁颠的跟着过来了. 于是今天早上兴高采烈的注册了账号,迫不及待的打开我的博客,呃!注册账号成功了 ...

  7. HTC Vive 体验的折腾经历

    HTC Vive 是个什么东西, 想必我就不用介绍了, 不知道自己百度吧 HTC Vive发布已经有一段时间了, 一直很纠结买还是不买, 这玩意太贵(官网6888),买了还不能直接用, 还要配太高性能 ...

  8. 线段树好题（2004集训队林涛PPT中的3题）

    1.snake:主要是要意识到全局的可能连法只有一种= =(略坑,题目的最小长度是唬人的……),所以关键就是能否构造出符合题意的图,可以考虑搜索解决,搜出一个就OK了,但是会发现那些满足条件中线段在非 ...

  9. 调研Android Studio开发环境的发展演变（附安装教程，多图）

    Android Studio(以下简称AS)第一次公开亮相是在2013年的谷歌I/O大会上,14年的大会上谷歌发布其试用测试版,如今AS已经历数次版本更新,功能十分强大.如(摘自百度百科Android ...

  10. Sublime Text 3 Build 3065 All System CracKed By Hmily[LCG]

    Sublime Text 3 Build 3065 All System CracKed By Hmily[LCG] <ignore_js_op> 程序员文本编辑器 Sublime Tex ...