在线DEMO展示
HTML：

CSS：

.bg { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;}#bg1 { background: url(http://pfile.cn/11n0lc) no-repeat; background-size: cover; -webkit-transition: opacity 2s linear; -moz-transition: opacity 2s linear; -o-transition: opacity 2s linear; transition: opacity 2s linear;}#bg2 { background: url(http://pfile.cn/emebgq) no-repeat; background-size: cover; -webkit-transition: opacity 2s linear; -moz-transition: opacity 2s linear; -o-transition: opacity 2s linear; transition: opacity 2s linear;}.fadein{ opacity:100;}.fadeout{ opacity:0;}

JS：

function fadeIn(e) { e.className = "bg fadein"};function fadeOut(e) { e.className = "bg fadeout"};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, 2000);

demo中只用了两张图片，如果需要插入更多的图片，可以在id=“imgs”的的div中加入一个新的子div ，class加上bg即可，然后在CSS中加入该div的描述，比如HTML中加入

，然后CSS中则加入#bg2 {
background: url(图片地址) no-repeat;
background-size: cover;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
} 即可。