Showtime

秋思工作室

专注于初中教育教学管理及初中数学教学。

导航

当前位置:首页博客技巧 > 正文页面

分享一组CSS图片轮播效果代码

2020年12月11日 本文作者:秋思 浏览:

  我的博客首页幻灯片是借助Flash插件来实现的,效果还不错,但是Flash Player已经被主流浏览器抛弃了。现在除了IE11,其它浏览器都不能自动显示幻灯片了,需要手动更改浏览器设置才能显示。因此我需要换一种方式来实现图片轮播效果。

CSS图片轮播效果代码

  首先秋思说明一下,网上关于使用代码网页实现幻灯片图片轮播效果的方法很多,比如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图片轮播代码没有完全搞好,暂时没有演示,后面会有的。

版权声明:未加注说明的文章均为本站原创首发,转载本站文章请遵循署名-非商业用途-保持一致的原则

文章标签:博客  图片  CSS  

首发网站:秋思工作室

原文链接:http://www.qiusi.me/post/142.html

欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!

欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

文章存档

标签

©2017-2020 秋思工作室. All rights reserved. Powered by Z-Blog. Theme named Yahei and made free by Qiusi.

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可.