如何实现1920bannerai网页中居中以及实现1920bannerai网页中切换的效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现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="../img/banner1.png" /><!--
--><img src="../img/banner2.png" /><!--
--><img src="../img/banner3.png" /><img src="../img/banner1.png" />
</div>
</div>
</body>
以上是关于如何实现1920bannerai网页中居中以及实现1920bannerai网页中切换的效果的主要内容，如果未能解决你的问题，请参考以下文章