JS realizes automatic transformation of menu effect code

JS realizes automatic transformation of menu effect code_javascript skills

WBOY

Release： 2016-05-16 15:40:00

Original

1127 people have browsed it

The example in this article describes the JS menu effect code that implements automatic transformation. Share it with everyone for your reference. The details are as follows:

This is an automatically changing JS menu, which is modified from the original automatic TAB. Use it if you need it. There are several JS functions in the code, which are used to control the automatic switching of TAB.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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&#63;"hover":"";
   if (menu.className=="hover")
     index=i;
 }
} 
var num=0;
var AutoPlayObj=null;
function d()
{
  setTab('one',num%7,7); 
  num++;
}
function AutoPlay()
{
  clearInterval(AutoPlayObj);
  AutoPlayObj=setInterval('d()',1000)
};
AutoPlay();
var tab1 = document.getElementById("Tab1");
tab1.onmouseover = function (){
num=index;
clearInterval(AutoPlayObj);
}
tab1.onmouseout = function(){AutoPlay();}
//-->
</script>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.