我的博客首页幻灯片是借助Flash插件来实现的,效果还不错,但是Flash Player已经被主流浏览器抛弃了。现在除了IE11,其它浏览器都不能自动显示幻灯片了,需要手动更改浏览器设置才能显示。因此我需要换一种方式来实现图片轮播效果。
首先秋思说明一下,网上关于使用代码网页实现幻灯片图片轮播效果的方法很多,比如Html5+CSS3,Html+CSS+js,CSS+jQuery等,不过我用的是纯CSS代码(其他方法不会一时半会学不来)。
Html代码:添加在放幻灯片的模板文件相应的位置,如下红色部分是我在本地测试时首页图片轮播Html代码。
<div id="divMain">
<div id="pics">
<div id="photo">
<img src="AD/1.jpg"/>
<img src="AD/2.jpg"/>
<img src="AD/3.jpg"/>
<img src="AD/4.jpg"/>
</div>
</div>
</div>
CSS代码:修改好模板文件后,接下来就是添加CSS样式代码了,如下所示。
#pics {margin:0 0 15px 0;padding:0;width: 630px;height: 160px;overflow: hidden;box-shadow: 0px 0px 5px #070505;border: 10px solid #1c1c1c;}
#photo {width: 2600px;animation: switch 12s ease-out infinite;}
#photo > img {float: left;padding:0;width: 630px;height: 160px;}
@keyframes switch {10%, 25% {margin-left: 0;}35%, 50% {margin-left: -630px;}60%, 75% {margin-left: -1260px;}85%, 100% {margin-left: -1890px;}}
保存好后,进行文件重建,前台刷新页面就可以看到显示效果了。秋思工作室的CSS图片轮播代码没有完全搞好,暂时没有演示,后面会有的。
版权声明:未加注说明的文章均为本站原创首发,转载本站文章请遵循署名-非商业用途-保持一致的原则
首发网站:秋思工作室
欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!
欢迎参与讨论,请在这里发表您的看法、交流您的观点。