基于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中加入

，然后CSS中则加入

#bg3 {
  background: url(图片地址) no-repeat;
  background-size: cover;
} 

即可。