Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><pead><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Automatic switch tab</title><style type="text/css">* {List-style: none; margin: 0; padding: 0; overflow: hidden }. tab1 {width: 401px; border-top: # A8C29F solid 1px; border-bottom: # A8C29F solid 1px; margin: 50px 200px ;}. menu {width: 400px; background: # eee; height: 28px; border-right: # A8C29F solid 1px; border-bottom: # A8C29F solid 1px;} li {float: left; width: 99px; text-align: center; line-height: 28px; height: 28px; cursor: pointer; border-left: # A8C29F solid 1px; color: #666; font-size: 14px; overflow: hidden }. menudiv {width: 399px; height: 300px; border-left: # A8C29F solid 1px; border-right: # A8C29F solid 1px; border-top: 0; background: # fefefefe }. menudiv div {padding: 15px; line-height: 28px ;}. off {background: # E0E2EB; color: #336699; font-weight: bold}</style><script type="text/javascript">Function setTab (name, cursel) {cursel_0 = cursel; for (var I = 1; I <= links_len; I ++) {var menu = document. getElementById (name + I); var menudiv = document. getElementById ("con _" + name + "_" + I); if (I = cursel) {menu. className = "off"; menudiv. style. display = "block";} else {menu. className = ""; menudiv. style. display = "none" ;}}} function Next () {cursel_0 ++; if (cursel_0> links_len) cursel_0 = 1 setTab (name_0, cursel_0 );} var name_0 = 'one'; var cursel_0 = 1; var ScrollTime = 3000; // cycle (millisecond) var links_len, iIntervalId; onload = function () {var links = document. getElementById ("tab1 "). getElementsByTagName ('Lil') links_len = links. length; for (var I = 0; I<links_len; i++){links[i].onmouseover=function(){clearInterval(iIntervalId);this.onmouseout=function(){iIntervalId = setInterval(Next,ScrollTime);;}}}document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){clearInterval(iIntervalId);this.onmouseout=function(){iIntervalId = setInterval(Next,ScrollTime);;}}setTab(name_0,cursel_0);iIntervalId = setInterval(Next,ScrollTime);}</script></pead><body><div class="tab1" id="tab1"><div class="menu"><ul><li id="one1" onclick="setTab('one',1)">Welcome</li><li id="one2" onclick="setTab('one',2)">News</li><li id="one3" onclick="setTab('one',3)">Introduction</li><li id="one4" onclick="setTab('one',4)">Blessing</li></ul></div><div class="menudiv"><div id="con_one_1"><p >Welcome to our website. JS effect Daquan welcome ~</p></div><div id="con_one_2" ><p >News 1 + 1, happy belongs to you</p></div><div id="con_one_3" ><p >It will automatically switch the tab, very good.</p></div><div id="con_one_4" ><p >Hope to come again. Goodbye!</p></div></div></div></body></td> </tr></table>
Tip: you can modify some code before running
