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

　　　　　*{  
             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;/*基于父容器進(jìn)行定位*/ 
            left:0; 
            animation-name: focusmap; 
            animation-duration: 12s; 
            animation-iteration-count: infinite;//動(dòng)畫(huà)調(diào)用可以簡(jiǎn)寫(xiě) 

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