#banner{
    /*宽度，浏览器的100%*/
    width: 100%;
    /*原则上，高度=图片高度*/
    height: 500px;
    position: relative;
    overflow: hidden;
   }
   #banner img{
    /*宽度，图片的实际高度*/
    width: 1920px;
    /*高度，充满父容器*/
    height: 500px;
    /*使用定位，让图片在父容器绝对居中*/
    position: absolute;
    left: 50%;
    margin-left: -960px;
   }

 

 

 

 

 

 

 

*{
    margin: 0px;
    padding: 0px;
   }
   
   #banner{
    width: 100%;
    height: 500px;
    overflow: hidden;
   }
   
   #banner_in{
    width: 7680px;
    height: 500px;
    position: relative;
    -webkit-animation: banner 8s ease infinite;
   }
   
   @-webkit-keyframes banner{
    /*0%{
     left:0px
    }
    
    33%{
     left: -1920px;
    }
    
    66%{
     left: -3840px;
    }
    
    100%{
     left: -5760px;
    }*/
    
    0%{
     left: 0px;
    }
    10%{
     left: 0px;
    }
    
    30%{
     left: -1920px;
    }
    40%{
     left: -1920px;
    }
    
    
    70%{
     left: -3840px;
    }
    80%{
     left: -3840px;
    }
    
    100%{
     left: -5760px;
    }
   }
   <body>
  
  <div id="banner">
   <div id="banner_in">
    <img src="../img/banner1.png" /><!--
    --><img src="../img/banner2.png" /><!--
    --><img src="../img/banner3.png" /><img src="../img/banner1.png" />
   </div>
  </div>
  
  
  
 </body>