<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit" onMouseOver="tz();" onMouseOut="jx()">
<ul>
<li class="select" onMouseOver="show(0)">
<a href="#">公告</a>
</li>
<li onMouseOver="show(1)">
<a href="#">规则</a>
</li>
<li onMouseOver="show(2)">
<a href="#">论坛</a>
</li>
<li onMouseOver="show(3)">
<a href="#">安全</a>
</li>
<li onMouseOver="show(4)">
<a href="#">公益</a>
</li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display:block">
<ul>
<li>
<a href="#">张勇：要玩快乐足球</a>
</li>
<li>
<a href="#">阿里2000万驰援灾区！</a>
</li>
<li>
<a href="#">旅游宝让你边玩边赚钱</a>
</li>
<li>
<a href="#">多行跟进阿里信用贷款</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>[<a href="#">通知</a>]</span>
<a href="#">"滥发"即将换新</a>
</li>
<li>
<span>[<a href="#">通知</a>]</span>
<a href="#">比特币严管啦！</a>
</li>
<li>
<span>[<a href="#">通知</a>]</span>
<a href="#">禁发商品名录！</a>
</li>
<li>
<span>[<a href="#">通知</a>]</span>
<a href="#">商品属性限制</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span>[<a href="#">聚焦</a>]</span>
<a href="#">金牌卖家再启航</a>
</li>
<li>
<span>[<a href="#">功能</a>]</span>
<a href="#">橱窗规则升级啦</a>
</li>
<li>
<span>[<a href="#">话题</a>]</span>
<a href="#">又爱又恨优惠劵 </a>
</li>
<li>
<span>[<a href="#">工具</a>]</span>
<a href="#">购后送店铺红</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="#">个人重要信息要管牢！</a>
</li>
<li>
<a href="#">卖家防范红包欺诈提醒</a>
</li>
<li>
<a href="#">更换收货地址的陷阱！</a>
</li>
<li>
<a href="#">注意骗子的技术升级了！</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<a href="#">淘宝之行大众评审赢公益金</a>
</li>
<li>
<a href="#">爱心品牌联合征集</a>
</li>
<li>
<a href="#">名公益机构淘宝开店攻略</a>
</li>
<li>
<a href="#">走进无声课堂</a>
</li>
</ul>
</div>
</div>
</div>
<script>
var div = document.getElementById("notice");
var li = div.getElementsByTagName("div")[0].getElementsByTagName("li");
var con = div.getElementsByTagName("div")[1].getElementsByClassName("mod");
function show(v) {
for (var j = 0; j < li.length; j++) {
if(v==j){
li[j].className = "select";
showw(j);
}else{
li[j].className = "";}
}
}
a=0;
function showw(v) {
for (var j = 0; j < con.length; j++) {
if(v==j){
con[j].style = "display:block";
a=v;
}else{
con[j].style = "display:none";}
}
}
function showww(){
show(a%li.length);
a++;
}
var time = setInterval("showww()",500);
function tz(){
window.clearInterval(time);
}
function jx(){
time = setInterval("showww()",500);
}
</script>
</body>
</html>
