执行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：轮播