执行fadein追加css,基于CSS3完成淡入（fadeIn）淡出（fadeOut）结果

网上的淡入淡出结果大多是遵照jquery中fadeIn和fadeOut的要领运用js来掌握元素的透明度到达目标，但瑕玷是有细微的卡顿感，而且运转效力平常。 这里供应别的一个思绪，即经由过程预先定义好的css款式掌握图片透明度的过渡， 这类要领过渡腻滑，过渡的结果基于css3的animation，所以效力高些。 思绪是将淡入，淡出的结果做成预先定义好的款式类，然后用JS转变元素的类来到达图片轮播。(注重：由于是基于CSS3的animation，在挪动端做的兼容性测试表现不错，桌面端临时没有发明太大的题目。但IE关于css的background支撑不太好，外链图片偶然会有题目。)

基于CSS3淡入淡出结果的图片自动轮播DEMO

症结点在于fadeIn和fadeOut之间的透明度切换：/* 轮播图片默许的款式*/

.bg {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

-webkit-transition: opacity 2s linear;

-moz-transition: opacity 2s linear;

-o-transition: opacity 2s linear;

transition: opacity 2s linear;

opacity:0;

filter:alpha(opacity=0);

}

.fadein{

opacity:100;

filter:alpha(opacity=100);

}

PS：轮播图片默许透明度为0，设置一个opacity=100名为fadein的类运用JS掌握其与默许透明度的切换，本篇博客的轮播要领是自动的一张张切换，并没有交互性， 运用触控摆布滑动图片的轮播请猛戳俺的另一篇博客：原生JS完成滑动图片轮播

而JS方面则是经由过程猎取imgs数组，轮播个中寄存图片的div， 要领是掌握图片div的class。

空话不多说，上代码：

HTML(后插进去的图片显现在前)：

CSS：.bg {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

-webkit-transition: opacity 2s linear;

-moz-transition: opacity 2s linear;

-o-transition: opacity 2s linear;

transition: opacity 2s linear;

opacity:0;

}

#bg1 {

background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;

background-size: cover;

}

#bg2 {

background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;

background-size: cover;

}

.fadein {

opacity: 100;

filter: alpha(opacity=100);

}

JS：// 替代class到达淡入淡出的结果

function fadeIn(e) {

e.className = "bg fadein"

};

function fadeOut(e) {

e.className = "bg"

};

//说明图片数组中当前的轮播图片

cur_img = document.getElementById("imgs").children.length - 1;

//图片轮播函数

function turnImgs(imgs) {

var imgs = document.getElementById("imgs").children;

if (cur_img == 0) {

fadeOut(imgs[cur_img]);

cur_img = imgs.length - 1;

fadeIn(imgs[cur_img]);

} else {

fadeOut(imgs[cur_img]);

fadeIn(imgs[cur_img - 1]);

cur_img--;

}

}

//设置轮播距离

setInterval(turnImgs, 3000);

demo中只用了两张图片，假如须要插进去更多的图片，能够在id=“imgs”的div中到场一个新的子div ，class加上bg即可，然后在CSS中到场该div的形貌，比方HTML中到场

background: url(图片地点) no-repeat;

background-size: cover;

}

即可。