html自动式选项卡js,2、自动播放选项卡

# :-: 2、自动播放选项卡

```

自动播放选项卡

.box{

width: 1050px;

border:1px solid red;

margin: 0 auto;

}

.box button{

width: 120px;

margin-top: 20px;

height: 50px;

font-size: 20px;

margin-left: 20px;

}

.box div{

margin-top: 20px;

width: 1050px;

height: 500px;

font-size: 40px;

text-align: center;

background-color: pink;

display: none;

}

.box .show{

display: block;

}

.box .active{

width: 140px;

background-color: tomato;

}

周杰伦

林俊杰

刘德华

张学友

陈奕迅

->

双截棍\ 千里之万\七里香

曹操,油条豆浆,江南

爱你一万年,冰雨,男人哭吧不是罪

吻别,情书,恶狼传说

十年,爱情呼叫转义,浮夸

//获取中间所有的button

var aButton = document.getElementsByTagName('button');

//定义一个空数组，存放中间所有按钮

var aBtn = [];

for (var i = 1; i < aButton.length-1; i++) {

aBtn.push(aButton[i]);

}

//用来记录当前选中的是那个按钮和div

var number = 0;

//获取所有的div

var aBox =document.getElementById('box');

var aDiv = aBox.getElementsByTagName('div');

//要给所有的button添加点击事件

for (var i = 0; i < aBtn.length; i++) {

//首先将所有的button和div的样式全部清空

aBtn[i].index =i;

aBtn[i].onclick = function(){

for (var j = 0; j < aBtn.length; j++) {

aBtn[j].className = '';

aDiv[j].className = '';

}

this.className = 'active';

aDiv[this.index].className='show';

//更新number值

number = this.index;

}

}

//获取第一个按钮和最后一个按钮

var oPre = aButton[0];

var oNext = aButton[aButton.length-1];

//添加点击事件

oPre.onclick = function () {

number--;

if (number == -1) {

number = aBtn.length-1;

}

addName();

}

oNext.onclick = next;

function next() {

number++;

if (number == aBtn.length) {

number = 0;

}

addName();

}

function addName() {

for (var i = 0; i < aBtn.length; i++) {

aBtn[i].className = '';

aDiv[i].className = '';

}

aBtn[number].className = 'active';

aDiv[number].className = 'show';

}

//定义一个全局的定时器对象

var timer = null;

timer = setInterval(next,1500);

aBox.onmouseover = function () {

clearInterval(timer);

}

aBox.onmouseout = function () {

timer = setInterval(next,1500);

}

```