浅谈css3的轮播图

css3实现的轮播图的准备

1：建立一个大的div盒子
2：建立一个专门给图片用的盒子，便于操作
3：以超链接的形式使图片和相对应的数字绑定起来

<div id="dahezi" >              <a id="a1" class="num">1</a>              <a id="a2" class="num">2</a>              <a id="a3" class="num">3</a>              <a id="a4" class="num">4</a>              <a id="a5" class="num">5</a>            <div id="photos" class="play">                <img src=1.jpg>                  <img src=3.jpg>                  <img src=4.jpg>                  <img src=5.jpg>                  <img src=2.jpg>                  <img src=1.jpg>            </div>  </div>  

对两个盒子的操作

1:对大盒子使用overflow:hidden属性，使得每一次只显示一张图片。
2:每一张图片使用绝对定位形式，宽度设置为每一张图片的宽度*（图片数+1）（因为有一张假图来缓冲最后 一张到第一张闪现的效果）。

#dahezi{       position:absolute;       overflow:hidden;   }#photos img {              float: left;              width: 700px;              height: 500px;          }  

3:给图片添加动画属性play，中间有若干个状态，可以拉动百分比进行移动，因为轮播图是往右转的，所以设置left，这样就是在最后一张到显示界面的时候，相当于把整体往左拉动（（图片数+1）*每一张宽度）的距离，这样就可以实现轮播效果

.play{              animation: tp 5s ease-out infinite;/**/          }          @keyframes tp {            0% {        margin-left: 0px;       }              20% {       margin-left: -700px;    }              40% {       margin-left: -1400px;    }              60% {       margin-left: -2100px; }             80% {      margin-left: -2800px;   }              100%{   margin-left: -3500px; }        }  

4:然后给轮播图加上一对小点，用以点击达到转换页面的效果，需要通过同一父元素进行不同子元素的操作。

.num:hover,#photos:hover{animation-play-state:paused;}        .num:nth-child(4){margin-right:30px}         .num:nth-child(3){margin-right:60px}          .num:nth-child(2){margin-right:90px}          .num:nth-child(1){margin-right:120px}        #a1:hover ~ #photos{animation: tp1 .1s ease-out forwards;}          #a2:hover ~ #photos{animation: tp2 .1s ease-out forwards;}          #a3:hover ~ #photos{animation: tp3 .1s ease-out forwards;}          #a4:hover ~ #photos{animation: tp4 .1s ease-out forwards;}          #a5:hover ~ #photos {animation: tp5 .1s ease-out forwards;}

5：用覆盖实现最终的轮播的细节（每一次转的宽度与具体的位置（这个根据图片盒子的宽度计算））

@keyframes tp1 {0%{margin-left:-2700px;}                        100%{margin-left:0px;}                   }          @keyframes tp2 {0%{margin-left:-2100px;}                        100%{margin-left:-700px;}                     }          @keyframes tp3 { 100%{margin-left:-1400px;}  }        @keyframes tp4 { 100%{margin-left:-2100px;}  }        @keyframes tp5 { 100%{margin-left:-2800px;} }

最后轮播图的效果就实现了。
相对比js的轮播图，css3实现的效果更流畅，卡顿更少。但是在连接数字与图片的关系，鼠标移入移除图片的时候图片的变化等效果就很差。总的来说，两者各有所长，css的简单易操作，但动态效果不足（主要体现在不能动态随着图片的增加而改变相应的效果）