码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-04-09 23:32:21      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:frame   inf   高度   使用   切换   height   position   宽度   osi   

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

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

标签:frame   inf   高度   使用   切换   height   position   宽度   osi   

原文地址:http://www.cnblogs.com/lwhvicky/p/6686871.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!