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