如何在css中实现幻灯片效果-创新互联
今天就跟大家聊聊有关如何在css中实现幻灯片效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联是一家集网站建设,甘南企业网站建设,甘南品牌网站建设,网站定制,甘南网站建设报价,网络营销,网络优化,甘南网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。下面我们就通过代码来一步步实现幻灯片切换(淡入淡出)的效果:
1、建立html文件,编写demo
首先我们要在页面上设置图像列表,包含在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中实现幻灯片效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
名称栏目:如何在css中实现幻灯片效果-创新互联
网站URL:http://pwwzsj.com/article/ceppgs.html