纯CSS手动滑动轮播图(隐藏滚动条)
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < div class="bigder"> < div class="big"> < dl > < dt >< img src="img/dongtai.png"/></ dt > </ dl > < dl > < dt >< img src="img/dongtai.png"/></ dt > </ dl > < dl > < dt >< img src="img/dongtai.png"/></ dt > </ dl > < dl > < dt >< img src="img/dongtai.png"/></ dt > </ dl > < dl > < dt >< img src="img/dongtai.png"/></ dt > </ dl > </ div > </ div > |
CSS:
1 2 3 4 | .bigder{ width : 100% ; margin : 0 auto ; height : 195px ; overflow : hidden ;}<br> .big{overflow-x: scroll ; height : 210px ; display :flex;justify- content : space-between;}<br> .bigder dl{ background-color : ghostwhite; text-align : center ; margin-right : 20px ;}<br> .bigder dl:last-child{ padding-right : 0 ;} |
其实横向轮播很简单,只要宽度超出父级就可以滑动,主要是滚动条要隐藏,最外层和第二层都要有固定高度,然后外层比内层高度高一点,滚动条在最下面,然后最外层overflow:hidden;就可以啦
对比图:
之前:,
之后:
其实还有一些简单的方法,但只限于-webkit内核的,支持C3的浏览器:
1)::-webkit-scrollbar {/*隐藏滚轮*/ display: none; }
2)::-webkit-scrollbar{width:0px}
但是,能用纯CSS,就最好不用这些
还有,既然说到隐藏滚动条,就多说点,Ionic隐藏滚动条:
给ion-content加上overflow-scroll="true",还有style="overflow:auto;"就可以啦
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥