javascript - css輪播圖適應(yīng)布局問(wèn)題
問(wèn)題描述
問(wèn)題解答
回答1：純靠CSS就可以實(shí)現(xiàn)類(lèi)似效果：
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容器設(shè)了寬度是為了便于觀察.按理來(lái)說(shuō)用定位也是可以的.但是得一個(gè)一個(gè)設(shè)置定位, 就沒(méi)弄了.
https://jsfiddle.net/m41tLwqb/1/https://jsfiddle.net/2zcqqj26/
回答3：曾用純CSS做輪播，至于你說(shuō)的這個(gè)，應(yīng)該能實(shí)現(xiàn)，但自己沒(méi)做過(guò)，沒(méi)法肯定
相關(guān)文章：
1. javascript - js setTimeout在雙重for循環(huán)中如何使用？2. 求救一下，用新版的phpstudy，數(shù)據(jù)庫(kù)過(guò)段時(shí)間會(huì)消失是什么情況？3. python沒(méi)入門(mén)，請(qǐng)教一個(gè)問(wèn)題4. javascript - 我的站點(diǎn)貌似被別人克隆了， google 搜索特定文章，除了域名不一樣，其他的都一樣，如何解決？5. html - 爬蟲(chóng)時(shí)出現(xiàn)“DNS lookup failed”，打開(kāi)網(wǎng)頁(yè)卻沒(méi)問(wèn)題，這是什么情況？6. 小程序怎么加外鏈，語(yǔ)句怎么寫(xiě)！求救新手，開(kāi)文檔沒(méi)發(fā)現(xiàn)7. php如何獲取訪問(wèn)者路由器的mac地址8. javascript - 在 vue里面用import引入js文件，結(jié)果為undefined9. html5 - input type=’file’ 上傳獲取的fileList對(duì)象怎么存儲(chǔ)于瀏覽器？10. java 線程監(jiān)控 重啟線程 觀察者模式的問(wèn)題的問(wèn)題
網(wǎng)公網(wǎng)安備