時(shí)間：2023-09-06 03:12:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-06 03:12:01 來源：網(wǎng)站運(yùn)營
僅使用CSS制作輪播：在不使用JavaScript或其他庫的情況下，如何使用HTML布局和CSS屬性制作輪播圖，精心制作，實(shí)際運(yùn)用中也未嘗不可！上次文章提到關(guān)于“CSS Scroll Snapping滾動(dòng)吸附鎖定元素或位置”，今天借此屬性在不使用JavaScript或相關(guān)庫的情況下實(shí)現(xiàn)圖片輪播效果。
在線咨詢
<main class="wrap"> <aside> <ul> <li> <a href="#one"> <img src="001.jpg"> </a> </li> <li> <a href="#two"> <img src="002.jpg"> </a> </li> <li> <a href="#three"> <img src="003.jpg"> </a> </li> <li> <a href="#four"> <img src="004.jpg"> </a> </li> <li> <a href="#five"> <img src="005.jpg"> </a> </li> </ul> </aside> <section> <img id="one" src="001.jpg"> <img id="two" src="002.jpg"> <img id="three" src="003.jpg"> <img id="four" src="004.jpg"> <img id="five" src="005.jpg"> </section></main>CSS設(shè)置.wrap{ background:rgb(37, 36, 36); width:640px; height:354px; display: grid; grid-template-columns: 1fr 5fr;}.wrap img{ width: auto; max-width: 100%; height: auto;}.wrap section{ height: 100%; overflow: auto; scroll-snap-type: y mandatory;}.wrap section img{ object-fit: cover; height: 100%; scroll-snap-align: start;}需要注意的是布局grid-template-columns: 1fr 5fr;圖片滾動(dòng)包裹scroll-snap-type: y mandatory;以及圖片展示object-fit: cover的設(shè)置。scroll-behavior: smooth即可。關(guān)鍵詞：使用
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
