最近在做一个站首页时,需要幻灯片效果,网上找发很多,都是调用一大堆的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;
}
}
本站的发展离不开您的支持,请在解决问题后再考虑是否为本站打赏或捐助。