自动切换的JS菜单

来源：互联网发布：淘宝云平台大数据编辑：程序博客网时间：2024/06/01 19:45
<!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>
0 0