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);
}
