首页 > 代码库 > 如何实现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网页中切换的效果