layui轮播图切换会有跳动_js的轮播图特效

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

});

}