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/
