window.οnlοad=function(){
var index=0,
timer=null,
nav=byID("nav"),
navItems=nav.getElementsByTagName("a"),
banner=byID("banner"),
slideItems=banner.getElementsByTagName("div"),
size=slideItems.length;
// 封装getElementById()
function byID(id){
return typeof(id)=="string"?document.getElementById(id):id;
}
// 封装通用事件绑定方法
function addHandler(element,type,handler){
if(element.addEventListener){
// 非ie浏览器
element.addEventListener(type,handler,true);
}else if(element.attachEvent){
// ie浏览器
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
}
function changeImg(){
for(var i=0;i<size;i++){
slideItems[i].style.display="none";
navItems[i].className="";
}
slideItems[index].style.display="block";
navItems[index].className="active";
}
// 点击选项卡切换图片
for(var idx=0,idxlen=navItems.length;idx<idxlen;idx++){
navItems[idx].setAttribute("data-id",idx);
addHandler(navItems[idx],"click",function(){
index=this.getAttribute("data-id");
changeImg();
});
}
// 自动播放
function startAutoplay(){
timer=setInterval(function(){
index++;
if(index>=size) index=0;
changeImg();
},1000)
}
startAutoplay();
// 停止播放
function stopAutoplay(){
clearInterval(timer);
}
// 鼠标停留在tab切换页时停止轮播
for(var idx=0,idxlen=navItems.length;idx<idxlen;idx++){
navItems[idx].setAttribute("data-id",idx);
addHandler(navItems[idx],"mouseover",function(){
stopAutoplay();
});
}
// 鼠标离开tab切换页时轮播
for(var idx=0,idxlen=navItems.length;idx<idxlen;idx++){
navItems[idx].setAttribute("data-id",idx);
addHandler(navItems[idx],"mouseout",function(){
startAutoplay();
});
}
// 鼠标放在banner图中停止轮播
addHandler(banner,"mouseover",function(){
stopAutoplay();
banner.style.cursor="pointer";
});
// 鼠标离开banner图开始轮播
addHandler(banner,"mouseout",function(){
startAutoplay();
});
}