选项卡封装的函数

function tab (id,event,time,isCarrousel) {

var oBox1 = document.getElementById(id);

// 第一个子元素

var oTab = oBox1.children[0];

var aBtn1 = oTab.children;

// 第二个子元素

var oCon = oBox1.children[1];

var aDiv1 = oCon.children;

//下标

var count = 0;

// 延迟调用的timer;

var timer;

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

aBtn1[i].index = i;

//添加事件的地方

aBtn1[i][event] = function () {

// 点击的时候,立马切换,onclick

// 鼠标移入的时候,隔500毫秒,onmouseover

if (event == 'onclick') {

count = this.index;

tab1();

} else {

//将this的值赋值给_this

var _this = this;

timer = setTimeout(function (){

// this -- > btn

count = _this.index;

tab1();

},time);

}

}

aBtn1[i].onmouseout = function () {

clearTimeout(timer);

}

}

if (isCarrousel == 'carrousel') {

//自动播放

var tid = setInterval(nextImg,1000);

oBox1.onmouseover = function () {

clearInterval(tid);

}

oBox1.onmouseout = function () {

clearInterval(tid);

tid = setInterval(nextImg,1000);

}

function nextImg () {

count++;

if (count == aBtn1.length) {

count = 0;

}

tab1();

}

}

//切换选项卡

function tab1 () {

//先清空所有的样式

//先清空所有的样式

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

aBtn1[j].className = '';

aDiv1[j].style.display = 'none';

}

console.log(count);

// 0 1 2 3

// count = undefined

// aBtn1[count]: 获取不到button

aBtn1[count].className = 'active';

aDiv1[count].style.display = 'block';

}

}

window.onload = function () {

//第一个选项卡: 点击切换

tab('box1','onclick',0,'carrousel');

//第二个选项卡: 鼠标移入切换

tab('box2','onmouseover',1000);

}