浅谈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的简单易操作，但动态效果不足（主要体现在不能动态随着图片的增加而改变相应的效果）