<!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. MySQL基础 - 内置函数

    Concat() 用于连接字段,一般DBMS使用+或者||. ex: 注意:上图中新检索出来的列名为'CONCAT(id, '->', name)'(实际上没有列名),这样虽然不影响在MySQL ...

  2. JS 之DOM range对象

    DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...

  3. 关于matlab中特殊字符, 上标和下标

    'T=25\circC',(摄氏度) 下标用 _{下划线} 上标用^ (尖号) 希腊字母等特殊字符用 α \alpha β \beta γ \gamma θ \theta Θ \Theta Г \Ga ...

  4. MATLAB中提高fwrite和fprintf函数的I/O性能

    提高fwrite和fprintf函数的I/O性能 http://www.matlabsky.com/thread-34861-1-1.html     今天我们将讨论下著名的fwrite(fprint ...

  5. SVN中trunk、branches、tags用法详解

    Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/. 那么标准的svn布局是:svn://proj/|+-trunk+-branches+-t ...

  6. 随便谈谈用canvas来实现文字图片粒子化

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...

  7. 『设计』Slithice 分布式架构设计-支持一体式开发，分布式发布

    项目原因: 参与过各种 分布式项目,有 Socket,Remoting,WCF,当然还有最常用的可以跨平台的 WebService. 分布式编码的时间浪费: 但是,无一例外的,开发分布式程序的开发遵循 ...

  8. 重写TiledServiceLayer实现Arcgis访问Mapabc地图服务 (转载)

    package com.baixin.main;/** *  * @ClassName:   MapAbcToArcGISTLayer * @Description:    ArcGIS访问MapAb ...

  9. [AaronYang]C#人爱学不学[4]

    本文章不适合入门,只适合有一定基础的人看.我更相信知识细节见高低,我是从4.0开始学的,终于有时间系统的学习C#5.0,是5.0中的知识,会特殊标记下.但写的内容也可能含有其他版本framework的 ...

  10. OneZero第一次会议（非正式）

    会议时间:2016年3月20日 15:50~16:50 会议成员:冉华(http://www.cnblogs.com/ranh941/) 张敏(http://www.cnblogs.com/zhang ...