<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动简易选项卡</title>
<style type="text/css">
*{padding: 0px;margin: 0px;list-style: none;}
#div1 ul{
display: inline-block;
}
li{
float: left;border: 1px solid #ccc;width: 60px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;
}
#div1 div{
width: 245px;height: 100px;background: pink;display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1 = document.getElementById('div1');
var aLi = oDiv1.getElementsByTagName('li');
var aDiv = oDiv1.getElementsByTagName('div');
var timer=null;
var num=0;
var len=aLi.length;
// alert(aLi.length);
// alert(aDiv[0].innerHTML);
for(var i=0;i<aLi.length;i++){
// index是自定义的一个属性,不能直接加在html中,浏览器会过滤掉它,报错,但是通过js添加,就没有问题:目的:让内容与this有上关系,以便操作内容
aLi[i].index=i;
aLi[i].onmouseover=function(){
clearInterval(timer);
num=this.index;//把当前选项卡转换成鼠标当前经过的选项卡
set_attr();
}
aLi[i].onmouseout=function(){
autoplay();
}
}
// 第一步,设置需变化的属性函数
function set_attr(){
// 其他不需要变化的选项卡
for(var i=0;i<aLi.length;i++){
aLi[i].style.background = '';
aDiv[i].style.display='none';
}
// 当前变化的选项卡
aLi[num].style.background = 'red';
aDiv[num].style.display='block';
}
// 第二步,设置自动播放函数,自动播放条件是每隔1s让num(当前变化的选项卡下标)加1
function autoplay(){
timer= setInterval(function(){
set_attr();
num=(++num)%len;//取模配合定时器下的自加,就能构成循环
},1000)
}
//初始化函数,并自动播放
autoplay();
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>教育</li>
<li>培训</li>
<li>工作</li>
<li>生活</li>
</ul>
<div>教育是asdhjk</div>
<div>培训是asdhjk</div>
<div>工作是asdhjk</div>
<div>生活是asdhjk</div>
</div>
</body>
</html>
自动选项卡
最新推荐文章于 2021-09-01 15:15:37 发布