<!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. 深入分析 Javascript 单线程

    面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event l ...

  2. matplotlib 的几种风格 练习

    〇.准备数据 import numpy as np x = np.linspace(0, 5, 10) y = x ** 2 一.matlab风格的API 1.单图 from pylab import ...

  3. sqlalchemy 的 ORM 与 Core 混合方式使用示例

    知乎: sqlalchemy 的 ORM 与 Core 混合方式操作数据库是一种怎样的体验? 答: 酸! 本文基于:win 10 + python 3.4 + sqlalchemy 1.0.13 基本 ...

  4. Android 动画之AlphaAnimation应用详解

    窗口的动画效果,淡入淡出什么的,有些游戏的欢迎动画,logo的淡入淡出效果就使用AlphaAnimation.AlphaAnimation(0.01f, 1.0f); 从0.01f到1.0f渐变.学过 ...

  5. Matlab的title如何实现换行显示？

    怎么才能在'B Range'前面开始换行呢? title(['abc','L Range:',num2str(a),'(nm)','~~',num2str(b),'(cm)','B Range:',n ...

  6. PostgreSQL： 一种用于生成随机字符串的方法

    create or replace function random_string(integer) returns text as $body$ select array_to_string(arra ...

  7. 浅析Java异常

    1.什么是异常 结构不佳的代码不能运行,这是Java的基本理念. 发现错误的理想时机是在编译期.然而,编译器并不能发现所有的错误,余下的问题就需要在程序运行时解决.这就需要错误能通过某种方式,把适当的 ...

  8. Unity3D UGUI中ScrollRect的一些知识点

    需求 这几天在公司里,项目需要将游戏游戏中的2D城堡界面在拉动的时候显示出3D的拉近效果.当时是在Cocos2d-x下实现的.回家的时候自己重新用Unity实现的了一遍. 虽然现在Unity已经到了5 ...

  9. DOM（七）使用DOM控制表格

    表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = docu ...

  10. EasyUI之Form load函数IE8下设置Radio或Checkbox的BUG

    EasyUI的form的load函数很好用,表单赋值就靠它了,简单方便.我们可以指定url以Ajax加载,如: 1: $('#ff').form('load', 'ajax/common') JSON ...