javascript - css轮播图适应布局问题
学习ing2017-06-13 09:25:41
纯靠CSS就可以实现类似效果：
HTML：
<body style='margin: 0;'>
<p style='position: absolute;width: 40%;height: 100%;background-color: blue;overflow: hidden;'>
<p class="p1" style='position: absolute;width: 100%;height: 80%;background-color: orange;top: 10%;left: 200%;'></p>
<p class="p2" style='position: absolute;width: 100%;height: 80%;background-color: green;top: 10%;left: 200%;'></p>
<p class="p3" style='position: absolute;width: 100%;height: 80%;background-color: red;top: 10%;left: 200%;'></p>
</p>
</body>CSS：
.p1{
animation: pleft 6s infinite linear;
-webkit-animation: pleft 6s infinite linear;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@keyframes pleft{
0%{left: 200%}
100%{left: -100%}
}
.p2{
animation: pmid 6s infinite linear;
-webkit-animation: pmid 6s infinite linear;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation-delay:2s;
-webkit-animation-delay:2s;
}
@keyframes pmid{
0%{left: 200%}
100%{left: -100%}
}
.p3{
animation: pright 6s infinite linear;
-webkit-animation: pright 6s infinite linear;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation-delay:4s;
-webkit-animation-delay:4s;
}
@keyframes pright{
0%{left: 200%}
100%{left: -100%}
}jsfiddle.net看看是不是你想要的
学习ing2017-06-13 09:25:41
想了两种方法: flex 与 inline-block
容器设了宽度是为了便于观察.
按理来说用定位也是可以的.但是得一个一个设置定位, 就没弄了.
https://jsfiddle.net/m41tLwqb/1/
https://jsfiddle.net/2zcqqj26/
