zoukankan      html  css  js  c++  java
  • 纯CSS手动滑动轮播图(隐藏滚动条)

    HTML:

    <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:

    .bigder{ 100%;margin: 0 auto;height: 195px;overflow: hidden;}
    .big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}
    .bigder dl{background-color: ghostwhite;text-align: center;margin-right: 20px;}
    .bigder dl:last-child{padding-right: 0;}

      

    其实横向轮播很简单,只要宽度超出父级就可以滑动,主要是滚动条要隐藏,最外层和第二层都要有固定高度,然后外层比内层高度高一点,滚动条在最下面,然后最外层overflow:hidden;就可以啦

    对比图:

    之前:

    之后:

     其实还有一些简单的方法,但只限于-webkit内核的,支持C3的浏览器:

      1)::-webkit-scrollbar {/*隐藏滚轮*/ display: none; }

      2)::-webkit-scrollbar{0px}

     但是,能用纯CSS,就最好不用这些

    还有,既然说到隐藏滚动条,就多说点,Ionic隐藏滚动条:

    给ion-content加上overflow-scroll="true",还有style="overflow:auto;"就可以啦

  • 相关阅读:
    html----有关图像
    前端开发初学者
    angular js 正序倒叙
    viewpager无线轮播获取网络图片
    angular js 球星
    angular js shopping
    angular js 公告墙
    Android 常用正则表达式
    Android 内存泄漏
    TCP/IP,必知必会的
  • 原文地址:https://www.cnblogs.com/eyed/p/7852403.html
Copyright © 2011-2022 走看看