簡單的寬屏CSS幻燈片代碼

簡單的寬屏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ù)自己的需要添加寬度，高度，等代碼。

簡單的寬屏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>

簡單的寬屏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;
}
}