怎么在css+js实现幻灯片上添加文字及旋转切换-创新互联
这篇文章运用简单易懂的例子给大家介绍怎么在css+js实现幻灯片上添加文字及旋转切换,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
成都创新互联服务项目包括金溪网站建设、金溪网站制作、金溪网页制作以及金溪网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,金溪网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到金溪省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!下面我们就来一步步实现效果(可以去之前的文章获取实现幻灯片效果的代码)。
5、给幻灯片添加文本文字
有很多方法可以解决这个问题,但也许最简单的方法是在链接中添加一些标题属性,并使用CSS在图像上显示它们:
html代码:
css代码:
#stage a::after { position: absolute; left: 11px; bottom: 11px; padding: 2px 0; width: calc(100% - 22px); background: rgba(0,0,0,0.5); text-align: center; content: attr(title); font-size: 1.1em; color: #fff; }
除了为我们的链接添加title属性之外没有其他任何变化,我们现在已经开始了基本的CTA幻灯片放映,甚至可以将其转换为对关键帧进行一些调整的轮播。
效果图:
所以,如果你必须有一个主页幻灯片来取悦那些权力,那就考虑放弃jQuery,就像上面那样。如果您有任何反馈或问题,请使用下面的按钮告诉我们。
6、转换为旋转木马切换效果
效果图(静态的,大家可以自己编译运行,查看效果):
附上css+js代码(html代码如上):
css代码:
#stage { margin: 1em auto; width: 640px; height: 400px; border: 10px solid #000; overflow: hidden; } #stage a { position: relative; display: inline-block; } #stage a::after { position: absolute; left: 11px; bottom: 11px; padding: 2px 0; width: calc(100% - 22px); background: rgba(0,0,0,0.5); text-align: center; content: attr(title); font-size: 1.1em; color: #fff; } #stage a:nth-of-type(2) { left: 640px; top: -50%; animation-name: slider; animation-delay: 4s; animation-duration: 1s; animation-timing-function: cubic-bezier(0,1.5,0.5,1); } #stage a:nth-of-type(n+3) { display: none; } @keyframes slider { from { transform: translateY(-50%) rotate(30deg); left: 360px; } to { transform: translateY(-50%); left: 0px; } }
js代码:
window.addEventListener("DOMContentLoaded", function(e) { var stage = document.getElementById("stage"); var slideComplete = function(e) { stage.appendChild(arr[0]); }; var arr = stage.getElementsByTagName("a"); for(var i=0; i < arr.length; i++) { arr[i].addEventListener("animationend", slideComplete, false); } }, false);
大功告成,大家可以自己动手编译看看效果!
关于怎么在css+js实现幻灯片上添加文字及旋转切换就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站栏目:怎么在css+js实现幻灯片上添加文字及旋转切换-创新互联
转载来于:http://scyanting.com/article/ceeiee.html