您的位置：首页技术文章
文章详情页

javascript - css轮播图适应布局问题

浏览：139日期：2022-11-20 17:00:20

问题描述

javascript - css轮播图适应布局问题

类似于轮播图布局，外面蓝色容器不设置宽度，100%自适应，而每一个子容器的宽度等于父容器的宽度并且一排显示，父元素超出的部分进行隐藏，在不使用js的情况下能实现吗？

问题解答

回答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做轮播，至于你说的这个，应该能实现，但自己没做过，没法肯定

标签： JavaScript
上一条：javascript - 移动端针对页面固定定位到底部的内容，每次调出键盘都会被输入键盘盖住下一条：javascript - 使用css如何将一个小盒子始终固定在大盒子的底部，大盒子高度为100%，请教。
相关文章：
1. dockerfile - [docker build image失败- npm install]2. nignx - docker内nginx 80端口被占用3. node.js - mongoDB使用$gte的问题4. java中关于直接插入排序遇到的问题。5. javascript - c#如何向js传值6. angular.js - angular内容过长展开收起效果7. java - mybatis怎么实现在数据库中有就修改,没有就添加8. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？9. docker gitlab 如何git clone？10. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？
排行榜
dockerfile - [docker build image失败- npm install]
dockerfile - [docker build image失败- npm install]
1. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？
2. javascript - c#如何向js传值
3. nignx - docker内nginx 80端口被占用
4. node.js - mongoDB使用$gte的问题
5. angular.js - angular内容过长展开收起效果
6. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？
7. java - mybatis怎么实现在数据库中有就修改,没有就添加
8. docker gitlab 如何git clone？
9. java中关于直接插入排序遇到的问题。
10. macos - mac下docker如何设置代理
热门标签