星空网 > 软件开发 > 网页设计

CSS3 实现简单轮播图

用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>

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;    }

 




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

关键词:CSS

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

美国公司税收制度,如何缴税的呢?:https://www.ikjzd.com/articles/136913
对标shopify,有赞商城海外版Allvalue好不好用?:https://www.ikjzd.com/articles/136914
推荐一个日结的网盟+双12福利!:https://www.ikjzd.com/articles/136915
热点解读|什么是保税仓库以及保税仓库的设立:https://www.ikjzd.com/articles/136916
字节跳动布局跨境电商;格力电器将在珠海横琴建立跨境电商平台:https://www.ikjzd.com/articles/136917
澄海某玩具厂一女子触电身亡!直接经济损失35.5万...:https://www.ikjzd.com/articles/136918
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流