你的位置:首页 > 软件开发 > 网页设计 > CSS3 实现简单轮播图

CSS3 实现简单轮播图

发布时间:2016-08-30 17:00:11
用css3动画实现图片切换效果,原理还是改变left值。只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换。html结构<div id="container"> <ul class="pic ...

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

html结构

<div id="container">    <ul class="pic">      <li><a href="javascript:;"><img src='/images/loading.gif' data-original="images/DSC01627.jpg" ></a></li>      <li><a href="javascript:;"><img src='/images/loading.gif' data-original="images/DSC01628.jpg" ></a></li>      <li><a href="javascript:;"><img src='/images/loading.gif' data-original="images/DSC02637.jpg" ></a></li>      <li><a href="javascript:;"><img src='/images/loading.gif' data-original="images/DSC01627.jpg" ></a></li><!-- 克隆第一张 -->    </ul>      </div>

原标题:CSS3 实现简单轮播图

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。