css實現滑動操作

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;
          }