css如何实现幻灯片效果？幻灯片的实现方法（代码示例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css如何实现幻灯片效果？幻灯片的实现方法（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2899字，纯文字阅读大概需要5分钟。
内容图文
本篇文章给大家带来的内容是介绍css如何实现幻灯片效果？幻灯片的实现方法（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。下面我们就通过代码来一步步实现幻灯片切换（淡入淡出）的效果：
1、建立html文件，编写demo
首先我们要在页面上设置图像列表，包含在div盒子中。类似于以下内容：
<div id="stage"> <a href="img/1.jpg"><img src="img/1.jpg" width="640" height="400"></a> <a href="img/2.jpg"><img src="img/2.jpg" width="640" height="400"></a> <a href="img/3.jpg"><img src="img/3.jpg" width="640" height="400"></a> <a href="img/4.jpg"><img src="img/4.jpg" width="640" height="400"></a> <a href="img/5.jpg"><img src="img/5.jpg" width="640" height="400"></a> <a href="img/6.jpg"><img src="img/6.jpg" width="640" height="400"></a> <a href="img/7.jpg"><img src="img/7.jpg" width="640" height="400"></a> <a href="img/8.jpg"><img src="img/8.jpg" width="640" height="400"></a> </div>
在此示例中，所有图像都有链接，但这不是必需的。如果你删除链接，你只需要改变一些CSS和JavaScript来引用'img'而不是'a'。
2、使用CSS来叠加图像
以下是我们用于以下演示的CSS代码：
#stage {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}通过将链接设置为position：absolute，我们将所有图像从文档流中取出并将它们堆叠在一起。然后，我们需要为#stage指定宽度和高度， 以便为幻灯片显示在页面上保留空间。这等于图像尺寸加上填充（每边10px）和边框（每边1px）。
然后，我们使用一些nth-of-type()选择器将第一个图像放在堆栈顶部，第二个图像放在堆叠的后面，其余图像隐藏在显示器之外。
最后，我们将动画关键帧分配给顶部图像，告诉它在设置opacity:0，淡出之前等待4秒。现在所缺少的只是一点JavaScript来将面对的图像移动到堆栈的底部，以便下一个图像可以依次显示和淡出。
3、使用JavaScript来触发效果
这里需要的只是为keyframe 动画结束时触发的图像分配事件处理程序。它需要最重要的照片，并把它移到后面：
window.addEventListener("DOMContentLoaded", function(e) {
var stage = document.getElementById("stage");
var fadeComplete = function(e) { stage.appendChild(arr[0]); };
var arr = stage.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);最上面的新图像现在假设为 nth-of-type(1)属性，包括关键帧动画--fader，依此类推其他图像。
就是这样！没有臃肿的代码，没有插件，没有库，只有几行vanilla JavaScript可以在所有现代浏览器中使用。
4、效果图：
运行以上代码就可以获得一个简单的淡入淡出幻灯片：
总结：以上就是本篇文章所实现的淡入淡出幻灯片效果，大家可以自己动手试试，加深理解，希望能对大家的学习有所帮助。
以上就是css如何实现幻灯片效果？幻灯片的实现方法（代码示例）的详细内容。
内容总结
以上是互联网集市为您收集整理的css如何实现幻灯片效果？幻灯片的实现方法（代码示例）全部内容，希望文章能够帮你解决css如何实现幻灯片效果？幻灯片的实现方法（代码示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。