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

本文介紹純CSS手動滑動輪播圖（隱藏滾動條），有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

HTML：

<p class="bigder">
　　<p class="big">

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="純CSS手動滑動輪播圖（隱藏捲軸）" ></dt>

　　　　</dl>

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="純CSS手動滑動輪播圖（隱藏捲軸）" ></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="純CSS手動滑動輪播圖（隱藏捲軸）" ></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="純CSS手動滑動輪播圖（隱藏捲軸）" ></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  / alt="純CSS手動滑動輪播圖（隱藏捲軸）" ></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影片教學！

相關推薦：

php公益培訓影片教學

#CSS線上手冊

div/css圖文教學

以上是純CSS手動滑動輪播圖（隱藏捲軸）的詳細內容。更多資訊請關注PHP中文網其他相關文章！