秋思工作室

  我的博客首页幻灯片是借助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图片轮播代码没有完全搞好，暂时没有演示，后面会有的。