首页 > 代码库 > 如何实现1920bannerai网页中居中以及实现1920bannerai网页中切换的效果

如何实现1920bannerai网页中居中以及实现1920bannerai网页中切换的效果

#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="http://www.mamicode.com/img/banner1.png" /><!--
    --><img src="http://www.mamicode.com/img/banner2.png" /><!--
    --><img src="http://www.mamicode.com/img/banner3.png" /><img src="http://www.mamicode.com/img/banner1.png" />
   </div>
  </div>
  
  
  
 </body>

如何实现1920bannerai网页中居中以及实现1920bannerai网页中切换的效果