纯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;"就可以啦

 

posted @   额爷  阅读(4012)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示