收藏
批改状态：未批改
老师批语：
作业总结：
新建变量：
新建一个变量num赋值0，新建一个变量timer赋值 null，获取标题集合的id并赋值变量noticeTit，获取内容div集合的id并赋值变量noticeCon，用noticeTit.getElementByTagName('li')获取一下li标签赋值给变量title，用noticeCon.ElementsByClassName获取一下内容集合的class并赋值给con变量。
循环并设置鼠标方法
使用for来循环一下，当变量 i 小于 title的长度的时候自增1，循环体内的i值赋值给title的索引（下标），title的下标连接鼠标事件onmouseenter 的函数，当鼠标移动到这个当前的这个标签的时候执行函数体内的动作，先清除一下定时器，执行showTab函数，函数传参当前的this.index索引值，把this.index值赋值给变量num。
使用title[i].onmouseleave=function执行方法，设置一个定时器定时器内每隔1秒执行autoPlay函数，并且把这个定时器赋值给变量timer。
创建showTab函数
创建函数showTab，括号内传值(i) .设置for循环，在循环体内如果变量 j 小于 con.length 的长度，j++。循环体内title变量的样式修改为空，con设置none隐藏。循环体外使用title[i].style.className='select' ,con.style.display='block'.意思是给当前下标的title添加一个class样式和让内容块con显示，下标值来自于函数传参的 i 。
创建autoPlay()函数
先让num++，因为自动播放了，需要让标题和内容跳到显示下一个。如果num的值等于title的长度说明已经到最后一个了，就清空num让num等于0。
if体外执行showTab(num) num的值已经是自增完或者是清空为0的值了，这样跳回showTab函数再运行即可。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
a{text-decoration: none;color: #333;}
#notice{
width: 498px;
border: 1px solid #eee;
overflow: hidden;
margin: 50px auto;
}
#notice-tit{
background: #f7f7f7;
height: 30px;
}
#notice-tit li{
float: left;
width: 70px;
height:29px;
line-height: 29px;
text-align: center;
}
.mod{margin: 10px;}
.select{
background: #fff;
font-weight:bolder;
border-left: 1px solid #eee;
border-right:1px solid #eee;
border-bottom: 1px solid #fff;
}
#notice-con li{
float: left;
width: 49%;
height: 26px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="notice">
<div id="notice-tit">
<ul>
<li class="select"><a href="javascript:;">公告1</a></li>
<li><a href="javascript:;">规则2</a></li>
<li><a href="javascript:;">论坛3</a></li>
<li><a href="javascript:;">安全4</a></li>
<li><a href="javascript:;">工艺5</a></li>
</ul>
</div>
<div id="notice-con">
<div class="mod" >
<ul>
<li><a href="javascript:;">新闻内容测试新闻内容测试新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试1</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
</ul>
</div>
<div class="mod" style='display:none'>
<ul>
<li><a href="javascript:;">新闻内容测试2</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
</ul>
</div>
<div class="mod" style='display:none'>
<ul>
<li><a href="javascript:;">新闻内容测试3</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
</ul>
</div>
<div class="mod" style='display:none'>
<ul>
<li><a href="javascript:;">新闻内容测试4</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
</ul>
</div>
<div class="mod" style='display:none'>
<ul>
<li><a href="javascript:;">新闻内容测试5</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
<li><a href="javascript:;">新闻内容测试</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
// 获取一下标题id的div
var noticeTit=document.getElementById('notice-tit');
// 获取一下内容id的div
var noticeCon = document.getElementById('notice-con');
// 获取一下标题的li元素集合
var title = noticeTit.getElementsByTagName('li');
// 获取一下内容class的集合
var con = noticeCon.getElementsByClassName('mod');
// 设置数量的初始值
var num = 0;
//存放定时器
var timer = null;
// 设置元素样式的函数
// 自动切换
// 循环一下标题的长度
for (var i = 0; i < title.length; i++) {
// 将循环的i赋值给title索引下标
title[i].index=i;
//console.log(title[i].index);
title[i].onmouseenter=function(){
clearInterval(timer) //清除一下定时器
// 调用showTab函数传值当前的索引
showTab(this.index)
num=this.index;// 拿到长度的值
}
// 当鼠标移出的时候定时器自动动，当鼠标移入停止
title[i].onmouseleave=function(){
timer=setInterval(autoPlay,3000)
}
}
function showTab(i){
// 先循环一遍内容div的长度，把所循环到的内容+标题的样式进行修改
for (var j = 0; j < con.length; j++) {
con[j].style.display='none';
title[j].className=''
}
// 把传进来的参数调用，让对应的元素获取样式
con[i].style.display='block';
title[i].className='select'
}
function autoPlay(){
// 当执行这个自动播放函数的时候，把num值+1这样就进入了下一个元素
num++;
// 如果num的值已经等于标题长度了，就清零num然后再执行shotTab函数
if(num==title.length){
num=0;
}
showTab(num)
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
