前端開發(fā)中,左右滾動圖片是實現(xiàn)網(wǎng)站美觀效果的一種方式。以下是實現(xiàn)左右滾動圖片的CSS代碼:
.scroll-img { display: flex; /* 使用 Flex 布局 */ overflow-x: scroll; /* 橫向滾動 */ scroll-behavior: smooth; /* 平滑滾動 */ white-space: nowrap; /* 不換行 */ } .scroll-img img { flex: 0 0 auto; /* 等分空間 */ margin-right: 10px; /* 圖片之間的間距 */ }
上述代碼使用了 Flex 布局,將圖片容器設為可橫向滾動的,每個圖片的寬度默認自適應,通過margin-right
控制圖片之間的間距。
在 HTML 中,需要使用以下代碼結構:
...
以上代碼中,將多張圖片放在scroll-img
容器中,每張圖片使用img
標簽,可以根據(jù)需要添加更多圖片。
通過以上代碼實現(xiàn)了網(wǎng)頁中的左右滾動圖片效果,可以在項目中使用該代碼實現(xiàn)類似的效果。