,,,vultr万博体育官网,万博体育平台官网,万博体育官方网站首页,,香港主机,香港VPS,香港服务器,服务推荐,国外VPS推荐

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

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

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

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

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

 

喜欢 (1)or分享 (0)