<!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. GIS开源软件大全

    3 - F 3map:行星地球项目由3map驱动,这是一个自由软件,由Telstra宽带基金会创建并支持,提供客户端与服务器的能力以在线再现虚拟地球. Amein!:其界面介于ArcMap和UMN M ...

  2. scrapy 爬取 useragent

    useragentstring.com 网站几乎廊括了所有的User-Agent,刚学了scrapy,打算那它练手,把上面的 user-agent 爬取下来. 本文只爬取常见的 FireFox, Ch ...

  3. JS insertAdajcentHTML 方法简介

    修改节点的内容除了常用的innerHTML和innerText之外,还有insertAdjacentHTML和insertAdjacentText方法,可以在指定的地方插入内容.insertAdjac ...

  4. win10快捷键大全 win10常用快捷键

    win10快捷键大全大家可以来了解一下,今天小编带来了win10常用快捷键,很多朋友喜欢使用快捷键来操作电脑,那么Windows10系统有哪些新的快捷键呢• 贴靠窗口:Win +左/右> Win ...

  5. 关于Mvvm的一些深入理解

    在CodePlex上找到MvvmToolkit,觉得文档写得非常好,具体,全面和深入,配合源代码来看,会对Mvvm有一个深入的理解,原文链接如下 http://www.galasoft.ch/mvvm ...

  6. 20135220谈愈敏Blog7_可执行程序的装载

    可执行程序的装载 谈愈敏 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000 一. ...

  7. CUDA编程学习（三）

    我们知道一个grid包含多个block,而一个block又包含多个thread,下面将是如何进行下thread中的并行. /**** Splot a block into parallel threa ...

  8. 解决装系统选中的磁盘采用的是GPT分区形式

    今天给服务器重装系统碰到的问题,记录一下 当时是按正常的操作:到了装系统选盘的时候是找不到盘符的,加载了raid驱动,然后顺利找到盘符,然后格式化了以前的C盘, 结果无法选中格式化后的C盘,无法下一步 ...

  9. 一个js验证类

    //******************************************************************* //作者: 丁伯洋 //日期: 2006-4-27 //概要 ...

  10. 一个基于.NET平台的自动化/压力测试系统设计简述

    AutoTest系统设计概述 AutoTest是一个基于.NET平台实现的自动化/压力测试的系统,可独立运行于windows平台下,支持分布式部署,不需要其他配置或编译器的支持.(本质是一个基于协议的 ...