css实现滑动操作

2018/05/04 15:25
阅读数 11

CSS 滑动操作的原理与轮播图原理类似:

子盒子宽度或者高度超出父盒子宽度或者高度,隐藏滚动条,就可以实现滑动操作:

  • html 结构如下:

    <div class="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

     

    CSS 代码如下:

    * {
                padding: 0;
                margin: 0;
            }
            .box {
                width: 500px;
                border: 1px solid black;
                height: 100px;
                overflow: scroll;}
            .box::-webkit-scrollbar {
                display: none;  
            }
            ul {
                list-style: none;
                width: 800px;
            }
            li {
                width: 100px;
                height: 100px;
                background-color:red;
                border: 1px solid black;
                float: left;
            }

     

     

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部