自动切换的JS菜单

<!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菜单的更多相关文章

Tab选项卡自动切换效果js实现
try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
原生 JS 实现 VS Code 自动切换输入法状态！这次没有AHK
上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...
原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用 ...
js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
带左右箭头切换的自动滚动图片JS特效
效果图按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
原生js实现随着滚动条滚动，导航会自动切换的效果
最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
HTML+JS+DOM【选项卡自动切换】
最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...
jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

随机推荐

php基础08：改变数据类型
<?php //1.获取数据类型 $num = 55; echo gettype($num); //integer //2.设置数据类型 settype($num, "string&q ...
极简反传(BP)神经网络
一.两层神经网络(感知机) import numpy as np '''极简两层反传(BP)神经网络''' # 样本 X = np.array([[0,0,1],[0,1,1],[1,0,1],[1, ...
第三方MMDrawerController的使用抽屉视图+（SUNSlideSwitchView）进度条手势滑动效果实现
下载网站:https://github.com/mutualmobile/MMDrawerController 首先,到下载网址下载MMDrawerController,将文件导入工程,里面有: MM ...
.NET Web开发初学者必知的四个网站
No.1 W3school 链接: http://www.w3school.com.cn/ 预览: 介绍: 全球最大Web前端技术教程网站.内容涵盖从基础的 HTML 到 CSS到进阶的XML.SQL ...
PHP Yii1.1.13（一）：命令行创建应用~shop
第一节初始目录结构 (1)初识目录结构在创建应用之前,我们来看一下Yii 1.x版本的目录结构:将yii-1.1.13安装文件解压到网站根目录下,打开framework目录,其目录如下图所示 (2 ...
zoeDylan.js框架-数据底层
zoeDylan.js是墨芈自己写的一套前端框架,不过由于墨芈经验不足,所以框架内部代码有些混乱. 墨芈写这套框架的目的是为了存储以后做前端开发过程中的一些代码,简单的说这套框架就是一个大杂烩. 这套 ...
细说 Web API参数绑定和模型绑定
今天跟大家分享下在Asp.NET Web API中Controller是如何解析从客户端传递过来的数据,然后赋值给Controller的参数的,也就是参数绑定和模型绑定. Web API参数绑定就是简 ...
（旧）子数涵数·PS ——翻页效果
一.首先在网络上下载一张图片,作为素材.这是我下载的素材,至于为什么选择这张照片呢,当然不是因为自己的一些羞羞的念头啦. 二.打开Photoshop,我使用的版本是CS3(因为CS3所占的磁盘空间较小 ...
NuGet更新引用Dll
第一种通过 "Add Library Package Reference..." 添加点击 ‘Add Library Package Reference...’ , 搜索你要添 ...
jsp+oracle实现数据库内容以表格形式在前台显示（包含分页）
jsp+oracle实现数据库内容以表格形式在前台显示(包含分页) 在文件夹内新增list_emp.jsp 代码如下: <%@ page contentType="text/html& ...

自动切换的JS菜单

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

随机推荐

热门专题