首頁 >web前端 >css教學 >純CSS手動滑動輪播圖（隱藏捲軸）

純CSS手動滑動輪播圖（隱藏捲軸）

青灯夜游轉載: 2018-10-10 16:07:203549瀏覽

本文介紹純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影片教學！

純CSS手動滑動輪播圖（隱藏捲軸）

相關文章