javascript - css輪播圖適應(yīng)布局問題
問題描述
問題解答
回答1：純靠CSS就可以實現(xiàn)類似效果：
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è)了寬度是為了便于觀察.按理來說用定位也是可以的.但是得一個一個設(shè)置定位, 就沒弄了.
https://jsfiddle.net/m41tLwqb/1/https://jsfiddle.net/2zcqqj26/
回答3：曾用純CSS做輪播，至于你說的這個，應(yīng)該能實現(xiàn)，但自己沒做過，沒法肯定
相關(guān)文章：
1. dockerfile - [docker build image失敗- npm install]2. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題3. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗！4. javascript - 前端如何通過ajax和node.js交互？5. javascript - 怎么實現(xiàn)讓 div 里面的 img 元素 中心居中, 如下示例圖6. python 字符串匹配問題7. javascript - IOS微信audio標(biāo)簽不能通過touchend播放8. Python Tornado批量上傳圖片并顯示功能9. css3 隱藏文本10. javascript - CSS圖片輪播顯示問題
網(wǎng)公網(wǎng)安備