純CSS手動滑動輪播圖的實現方法

這篇文章主要介紹純CSS手動滑動輪播圖的實現方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

HTML：

<p class="bigder">
　　<p 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>

　　</p>
</p>

CSS:

.bigder{width: 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{width:0px}

但是，能用純CSS，就最好不用這些

還有，既然說到隱藏滾動條，就多說點，Ionic隱藏滾動條：

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

以上是“純CSS手動滑動輪播圖的實現方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！