簡(jiǎn)單的寬屏CSS淡入淡出幻燈片代碼

最近在做一個(gè)站首頁(yè)時(shí)，需要幻燈片效果，網(wǎng)上找發(fā)很多，都是調(diào)用一大堆的CSS樣式及js，而這些樣式與JS又與目前網(wǎng)站調(diào)用代碼部分有沖突，對(duì)于不太懂JS的俺很是頭痛，經(jīng)過不斷測(cè)試，終于找到一個(gè)代碼比較少的幻燈片代碼，并且與以前的JS代碼也不沖突，下面就分享給大家。

簡(jiǎn)單的寬屏CSS幻燈片代碼

簡(jiǎn)單的寬屏CSS幻燈片HTML代碼：

<div id="slideshow">
<a href="#"><img src="static/images/slide-1.jpg" ></a>
<a href="#"><img src="static/images/slide-2.jpg"></a>
<a href="#"><img src="static/images/slide-3.jpg" ></a>
<a href="#"><img src="static/images/slide-4.jpg"></a>
</div>

可根據(jù)自己的需要添加寬度，高度，等代碼。

簡(jiǎn)單的寬屏CSS幻燈片JS代碼：

<script>
	window.addEventListener("DOMContentLoaded", function(e) {
    var slideshow = document.getElementById("slideshow");
    var fadeComplete = function(e) { slideshow.appendChild(arr[0]); };
    var arr = slideshow.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }
  }, false);
</script>

簡(jiǎn)單的寬屏CSS幻燈片CSS樣式代碼：

body {
    margin: 0
}
#slideshow {}
#slideshow a {
    position: absolute;
}
#slideshow a img {
    background: #fff;
}
#slideshow a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
}
#slideshow a:nth-of-type(2) {
    z-index: 10;
}
#slideshow a:nth-of-type(n+3) {
    display: none;
}
 @keyframes fader {
 from {
opacity: 1.0;
}
 to {
opacity: 0.0;
}
}