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. angular.js - 输入邮箱地址之后， 如何使其自动在末尾添加分号？2. javascript - JS 里面的 delete object.key 到底删除了什么？3. mysql - 电商如何存储营业额数据4. javascript - 后台管理系统左侧折叠导航栏数据较多，怎么样直接通过搜索去定位到具体某一个菜单项位置，并展开当前菜单5. 管理员信息修改时的密码问题6. java如何生成token？7. javascript - html5的data属性怎么指定一个function函数呢？8. javascript - 如何使用nodejs 将.html 文件转化成canvas9. html5 - 为什么使使用vue cli 脚手架，post-css 没有自动对css3属性自动添加浏览器前缀呢？10. android - RxJava 中有根据条件执行不同函数的操作符吗？
网公网安备