javascript - css輪播圖適應布局問題
問題描述
問題解答
回答1：純靠CSS就可以實現類似效果：
HTML：<body style=’margin: 0;’> <p style=’position: absolute;width: 40%;height: 100%;background-color: blue;overflow: hidden;’><p style=’position: absolute;width: 100%;height: 80%;background-color: orange;top: 10%;left: 200%;’></p><p style=’position: absolute;width: 100%;height: 80%;background-color: green;top: 10%;left: 200%;’></p><p 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看看是不是你想要的
回答2：想了兩種方法: flex 與 inline-block容器設了寬度是為了便于觀察.按理來說用定位也是可以的.但是得一個一個設置定位, 就沒弄了.
https://jsfiddle.net/m41tLwqb/1/https://jsfiddle.net/2zcqqj26/
回答3：曾用純CSS做輪播，至于你說的這個，應該能實現，但自己沒做過，沒法肯定
相關文章：
1. css3 - 沒明白盒子的height隨width的變化這段css是怎樣實現的?2. java - 根據月份查詢多個表里的內容怎么實現好？3. python3.x - c++調用python34. javascript - 在 model里定義的 引用表模型時，model為undefined。5. php工具中的mysql還是5.1以下的，請問如何才能升級到5.1以上？6. css3 - 這個右下角折角用css怎么畫出來？7. atom開始輸入！然后按tab只有空格出現沒有html格式出現8. javascript - 移動端自適應9. android - 課程表點擊后浮動后邊透明可以左右滑動的界面是什么？10. apache - 想把之前寫的單機版 windows 軟件改成網絡版，讓每個用戶可以注冊并登錄。類似 qq 的登陸，怎么架設服務器呢？
網公網安備