您的位置:首页 > Web前端 > JavaScript

针对淡入淡出的定时轮播效果js

2015-09-29 15:17 357 查看
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性)。

先定义好两个class名,有分别有淡入bannerli0,和淡出的效果bannerli1。再用js定时器,让其类名替换。

(没有什么特别的难点,就是要循环注意好~)

var show = new function(){

var i = 0;
setInterval(function(){

if(!hasClass(Bannerli[i],"bannerli0")){
removeClass(Bannerli[i],"bannerli1");
addClass(Bannerli[i],"bannerli0");

++i;
if(i==Bannerli.length){i=0};
removeClass(Bannerli[i],"bannerli0");
addClass(Bannerli[i],"bannerli1");

if(i > (Bannerli.length)){
return;
}
}
},2500)

}


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: