html js实现tab代码,原生JS代码实现自动TAB切换（原创）

//声明变量

var main = byId("main"),

index = 0,

nav = byId("nav"),

tabs = nav.getElementsByTagName("span"),

banner = byId("banner"),

pics = banner.getElementsByTagName("div"),

len = tabs.length;

//封装getElementById函数

function byId(id) {

return typeof(id) === "string" ? document.getElementById(id) : id;

}

//封装通用事件绑定函数，兼容性写法

function addHandler(element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent("on" + type, handler);

} else {

element["on" + type] = handler

}

}

//封装改变图片函数

function changeImg() {

for (var j = 0; j < len; j++) {

tabs[j].className = "";

pics[j].style.display = "none"

}

tabs[index].className = "active";

pics[index].style.display = "block"

}

//封装定时器函数

function startAutoPlay() {

timer = setInterval(function() {

index++;

if (index >= len) {

index = 0;

}

changeImg();

}, 3000)

}

//封装清除定时器函数

function stopAutoPlay() {

if (timer) {

clearInterval(timer)

}

}

//鼠标经过tab变颜色，且背景图变换

for (var i = 0; i < len; i++) {

tabs[i]["data-id"] = i;

addHandler(tabs[i], "mouseover", function() {

index = this["data-id"];

changeImg();

})

}

//开启自动轮播

startAutoPlay();

//鼠标滑入main，停止自动轮播

addHandler(main, "mouseover", stopAutoPlay);

//鼠标离开main,重新开启自动轮播

addHandler(main, "mouseout", startAutoPlay);