TAB tab Auto-Toggle effect JS Implementation

Try.html

<! DOCTYPE html>"Utf-8"> <title></title> <link rel="stylesheet"Type="Text/css"href="Try.css"> <script type="Text/javascript"Src="script.js"></script>"Notice" class="Notice"> <divclass="Notice-tit"Id="Notice-tit"> <ul> <li><a href="#"> Announcements </a></li> <li><a href="#"> Rules </a></li> <li><a href="#"> Forum </a></li> <li><a href="#"> Safety </a></li> <liclass="Select"><a href="#"> Philanthropy </a></li> </ul> </div> <div id="Notice-con" class="Notice-con"> <divclass="MoD"style="Display:none;"> <ul> <li><a href="#"> Zhang Yong: play happy football </a></li> <li><a href="#"> Zhang Yong: play happy football </a></li> <li><a href="#"> Zhang Yong: play happy football </a></li> <li><a href="#"> Zhang Yong: play happy football </a></li> </ul> </div> <divclass="MoD"style="Display:none;"> <ul> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: To play happy football </a></li> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: To play happy football </a></li> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: To play happy football </a></li> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: To play happy football </a></li> </ul> </div> <divclass="MoD"style="Display:none;"> <ul> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: play happy football </a></li> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: play happy football </a></li> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: play happy football </a></li> <li><span>[<a href="#"> Notice </a>]</span><a href="#"> Zhang Yong: play happy football </a></li> </ul> </div> <divclass="MoD"style="Display:none;"> <ul> <li><a href="#"> Zhang Yong: to play happy </a></li> <li><a href="#"> Zhang Yong: To play happy football </a></li> <li><a href="#"> Zhang Yong: To play happy football </a></li> <li><a href="#"> Zhang Yong: To play happy football </a></li> </ul> </div> <divclass="MoD"style="Display:block;"> <ul> <li><a href="#"> Zhang Yong: to play happy </a></li> <li><a href="#"> Zhang Yong: To play happy football </a></li> <li><a href="#"> Zhang Yong: To play happy football </a></li> <li><a href="#"> Zhang Yong: to play Happy </a></li> </ul> </div> </div></div></body>
Try.css
*{margin:0;    padding:0;    List-style:none; font-size:12px;}.    notice{width:298px;    height:98px;    margin:10px;    border:1px solid #eee; Overflow:hidden;}.    notice-tit{height:27px;    position:relative; Background-color: #f7f7f7;}.    Notice-tit ul{Position:absolute;    width:301px; Left: -1px;}.    Notice-tit ul li{Float:left;    width:58px;    height:26px;    Text-align:center;    line-height:26px;    Overflow:hidden;    padding:0 1px;    Background: #f7f7f7; border-bottom:1px solid #eee;}.    Notice-tit ul li.select{background: #fff;    Border-bottom-color: #fff;    border-left:1px solid #eee;    border-right:1px solid #eee;    padding:0; Font-weight:bolder;}.    Notice Li A:link,.notice-tit li a:visited{text-decoration:none; Color: #000;}. Notice Li a:hover{color: #f90;}. Notice-con. mod{margin:10px 10px 10px 19px;}.    Notice-con. mod ul li{float:left;    width:134px;    height:25px; Overflow:hidden;}
   script.js   
 
function $ (ID) {return typeof id=== ' string '? document.getElementById (ID): ID;}  Window.onload=tab;function tab () {var index=0;  var timer=null;  var lis=$ (' Notice-tit '). getElementsByTagName (' Li ');  var divs=$ (' Notice-con '). getElementsByTagName (' div ');    for (Var i=0;i<lis.length;i++) {lis[i].id=i;      Lis[i].onmouseover=function () {clearinterval (timer);    Changeoption (this.id);        } lis[i].onmouseout=function () {timer=setinterval (autoplay,2000);    }} if (timer) {clearinterval (timer);  Timer=null;  }   // ???????????????????????  Timer=setinterval (autoplay,2000);      function AutoPlay () {index++;      if (index>=lis.length) {index=0;  } changeoption (index);       } function Changeoption (Curindex) {for (Var j=0;j<lis.length;j++) {lis[j].classname= ';    Divs[j].style.display= ' None ';    } lis[curindex].classname= ' select ';    divs[curindex].style.display= ' block ';  Index=curindex; }}
Effect:
2017-09-05 20:45:21
TAB tab Auto-Toggle effect JS Implementation