基於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（後插入的圖片顯示在前）：

<div id="imgs">
  <div id="bg1" class="bg"></div>
  <div id="bg2" class="bg"></div>
</div>

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中加入<div id="bg3" class="bg"></div>，而後CSS中則加入

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

便可。