<!doctype html>
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">
/*
要求:1:完成鼠标移上导航切换选项卡的效果(上下文字一起改变);
2:使用定时器完成自动切换的效果
*/
window.onload = function(){
var timer = null;
var num = 0;
var tit = document.getElementById('notice-tit');
var lis = tit.getElementsByTagName('li');
var con = document.getElementById('notice-con');
var divs = con.getElementsByTagName('div');
timer = setInterval(autoplay,3000);
for(var i=0;i<lis.length;i++){
lis[i].id = i;
lis[i].onmouseover = function(){
clearInterval(timer);
changTab(this.id);
}
lis[i].onmouseout = function(){
timer = setInterval(autoplay,3000);//设置3秒钟自动切换
}
}
function autoplay(){
num++;
if(num>=lis.length){
num = 0;
}
changTab(num);
}
function changTab(curnum){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
divs[j].style.display = "none";
}
lis[curnum].className = "select";
divs[curnum].style.display = "block";
num = curnum;
}
}
</script>
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<ul>
<li class="select">
<a href="#">公告</a>
</li>
<li >
<a href="#">规则</a>
</li>
<li >
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li >
<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>
</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>
</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>
</body>
</html>
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">
/*
要求:1:完成鼠标移上导航切换选项卡的效果(上下文字一起改变);
2:使用定时器完成自动切换的效果
*/
window.onload = function(){
var timer = null;
var num = 0;
var tit = document.getElementById('notice-tit');
var lis = tit.getElementsByTagName('li');
var con = document.getElementById('notice-con');
var divs = con.getElementsByTagName('div');
timer = setInterval(autoplay,3000);
for(var i=0;i<lis.length;i++){
lis[i].id = i;
lis[i].onmouseover = function(){
clearInterval(timer);
changTab(this.id);
}
lis[i].onmouseout = function(){
timer = setInterval(autoplay,3000);//设置3秒钟自动切换
}
}
function autoplay(){
num++;
if(num>=lis.length){
num = 0;
}
changTab(num);
}
function changTab(curnum){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
divs[j].style.display = "none";
}
lis[curnum].className = "select";
divs[curnum].style.display = "block";
num = curnum;
}
}
</script>
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<ul>
<li class="select">
<a href="#">公告</a>
</li>
<li >
<a href="#">规则</a>
</li>
<li >
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li >
<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>
</body>
</html>