> 网站教程 > 简单的宽屏CSS淡入淡出幻灯片代码

简单的宽屏CSS淡入淡出幻灯片代码

网站教程 03-21 835

最近在做一个站首页时，需要幻灯片效果，网上找发很多，都是调用一大堆的CSS样式及js，而这些样式与JS又与目前网站调用代码部分有冲突，对于不太懂JS的俺很是头痛，经过不断测试，终于找到一个代码比较少的幻灯片代码，并且与以前的JS代码也不冲突，下面就分享给大家。

简单的宽屏CSS幻灯片代码

简单的宽屏CSS幻灯片HTML代码：

<div id="slideshow">
<a href="#"><img src="static/images/slide-1.jpg" alt="简单的宽屏CSS淡入淡出幻灯片代码" ></a>
<a href="#"><img src="static/images/slide-2.jpg" alt="简单的宽屏CSS淡入淡出幻灯片代码"></a>
<a href="#"><img src="static/images/slide-3.jpg" alt="简单的宽屏CSS淡入淡出幻灯片代码" ></a>
<a href="#"><img src="static/images/slide-4.jpg" alt="简单的宽屏CSS淡入淡出幻灯片代码"></a>
</div>

可根据自己的需要添加宽度，高度，等代码。

简单的宽屏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;
}
}

 

标签：