你的位置:首页 > 网页设计

[网页设计]CSS3 实现简单轮播图


用css3动画实现图片切换效果,原理还是改变left值。只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换。

html结构

<div id="container">    <ul class="pic">      <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li>      <li><a href="javascript:;"><img src="images/DSC01628.jpg" alt="pic2"></a></li>      <li><a href="javascript:;"><img src="images/DSC02637.jpg" alt="pic3"></a></li>      <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li><!-- 克隆第一张 -->    </ul>      </div>

css样式

     *{       margin: 0;       padding: 0;       text-decoration: none;     }    ul{      list-style: none;    }        #container{      position: relative;      width: 400px;      height: 200px;      overflow: hidden;/*隐藏溢出的图片*/    }    .pic{      width:1600px;/*4张图的宽度*/      position: absolute;/*基于父容器进行定位*/      left:0;      animation-name: focusmap;      animation-duration: 12s;      animation-iteration-count: infinite;//动画调用可以简写    }     @keyframes focusmap {      0%,30%{        left: 0;      }      35%,65%{        left: -400px;      }      70%,99%{        left: -800px;      }      100%{        left: -1200px;      }          }    .pic li{      float: left;      background: #5dd94e;    }    .pic li img {      width: 400px;      height: 200px;    }