JS实现自动变换的菜单效果代码

本文实例讲述了射流研究…实现自动变换的菜单效果代码。分享给大家供大家参考。具体如下：

这是一款自动变换的射流研究…菜单，由原来的一款自动拉环修改而成的，有需要的就拿去，代码内有几个射流研究…函数，分别用来控制拉环的自动切换。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-auto-cha-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题简洁Tab/titlestyle type='text/css '！-车身，div，ul，li { padding:0文本对齐：居中；}body {font:12px '宋体；文本对齐：居中；} a:link { color: # 00F文本装饰：无；} a :已访问{ color: # 00F文本装饰：无；} a:hover { color: # c00文本修饰：下划线；} ul { list-style :无；}/*选项卡1 */# Tab1 {宽度：900 pxmargin :0 pxpadding :0 pxmargin :0 auto }/*菜单class*/.menubox { width :100%；后台： URL()；高度：28 px行高：28 px}.menubox ul { margin :0 pxpadding :0 px }。Menubox li { float:left显示：块；光标：指针指针；宽度宽度：114px文本对齐：居中；color : # 949694 font-weight :加粗；}.李。悬停{ padd :0 px背景# fff宽度宽度：116像素边框-左侧：1px实心# A8C29F边框-top:1px实心#边框-右侧：1px实心# A8C 29后台： URL()；color : # 739242 font-weight : bold；高度：27 px线高：27 px}.content box { clear : both margin-top :0 px；border:1px实心# A8C 29边框-top :无；高度：181px文本对齐：居中；填充-top :8 px；}-/style/head dybrbrdiv id=' Tab1 ' div class=' Menubox ' ul Li id=' one 0 ' on mouse over=' SetTab '(one，0，7)=' hover '新闻1/Li Li id=' one 1 ' on mouse over=' SetTab '(one，1，7)新闻2/Li Li id=' one 2 ' on mouse over=' SetTab '(one，2，7)新闻3/Li Li id=' one 3 ' on mouse over=' SetTab '(one，3，7)新闻4/Li Li id=' one 4 ' on mouse over=' SetTab '(one，4，7)新闻5/李Li id=' one 5 ' on mouse over=' SetTab '(one，5，7)新闻6/Li Li id=' one 6 ' on mouse over=' SetTab '(one，6，7)新闻7/li /ul /div/divbrscript！ - /*第一种形式第二种形式更换显示样式*/var指数；函数setTab(name，cursel，n){ for(var I=0；在；I){ var menu=document。getelementbyid(名称' I)；'menu.className=i==cursel '？悬停":";if(菜单。类名=' hover ')索引=我；} } var num=0；var AutoPlayObj=null函数d(){ setTab('one '，num%7，7)；数量；}函数AutoPlay(){ clearInterval(AutoPlayObj)；AutoPlayObj=setInterval('d()'，1000)}；AutoPlay()；var标签1=文档。getelementbyid(' tab 1 ')；标签1。onmouseover=function(){ num=index；clearInterval(AutoPlayObj)；}选项卡1。onmouseout=function(){ AutoPlay()；}/////脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。