自动播放选项卡（js）
2018-08-23 本文已影响50人
GHope
代码效果展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动播放选项卡</title>
<style type="text/css">
.box{
width: 1000px;
border: 1px solid mediumspringgreen;
margin: 0 auto;
}
.box > div{
display: none;
background-color: black;
font-size: 55px;
color: red;
}
button{
width: 200px;
height: 100px;
font-size: 22px;
margin-left:35px ;
display: inline-block;
}
.box > .film{
background-color: aquamarine;
font-size: 33px;
}
.box > .canon{
display: block;
}
</style>
</head>
<body>
<div class="box">
<button class="film">国产电影</button>
<button>欧美电影</button>
<button>日韩电影</button>
<button>其它电影</button>
<div class="canon">大话西游、鬼子来了、霸王别姬、斗牛、杀生、让子弹飞、一步之遥、邪不压正、无人区、卧虎藏龙、东邪西毒</div>
<div>穆赫兰道、盗梦空间、肖生克的救赎、阿甘正传、楚门的世界、电锯惊魂、死神来了、异次元杀阵、泰坦尼克号</div>
<div>熔炉、哆啦A梦、千与千寻、釜山行、汉江怪物、七龙珠、灌篮高手、热血高校、午夜凶铃</div>
<div>三傻大闹宝莱坞、小萝莉的猴神大叔、地球上的星星、巴霍巴利王、我的个神啊、贫民窟的百万富翁</div>
</div>
</body>
</html>
<script type="text/javascript">
//获得盒子
var obox = document.getElementsByClassName('box')[0]
//通过盒子获取其中所有的button和div
var abtns = obox.getElementsByTagName('button')
var adivs = obox.getElementsByTagName('div')
//当前坐标
var number = 0
for (var i = 0; i < abtns.length; i++) {
abtns[i].index = i
abtns[i].onclick = function () {
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
this.className = 'film'
adivs[this.index].className = 'canon'
number = this.index
}
}
//循环函数，使用定时器周期调用，做坐标自加操作，通过求余处理得到0-3之间的数清空属性名在赋值
function next(){
number++
number %= 4
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
abtns[number].className = 'film'
adivs[number].className = 'canon'
}
timer = setInterval(next,1000)
// 如果鼠标放到box上面，将定时器销毁，鼠标离开box的时候，重新创建定时器自动播放
obox.onmouseover = function () {
clearInterval(timer)
}
obox.onmouseout = function () {
timer = setInterval(next, 1000)
}
</script>
代码思路：先有一个大盒子，再向其中添加需要用到的button和div。给所有的button和div设置基本属性，比较关键的是div的display值。其实选项卡实现的实质就是对div中display属性值的修改，自动播放的实现则依赖于定时器对实现选项卡功能函数的周期调用。该函数通过遍历button和div清空特殊设置，保留基本设置，再给点击的button和对应div设置选中状态和显示设置。
注：用过盒子获取其中的标签并修改其中属性，比较容易被忽略的一点，如果出现奇怪的现象可以从这点考虑考虑。
