CSS圖片橫排無(wú)限滾動(dòng)是一種在網(wǎng)頁(yè)中展示圖片的方法,它可以讓多張圖片依次橫向排列,并自動(dòng)滾動(dòng),形成無(wú)限循環(huán)的效果。
/* CSS代碼 */ .slider { display: flex; overflow-x: scroll; scroll-behavior: smooth; white-space: nowrap; } img { width: 300px; height: 200px; object-fit: cover; margin-right: 10px; }
首先,我們創(chuàng)建一個(gè)包含圖片的容器元素,可以使用div或其他塊級(jí)元素。在CSS中,我們給該容器添加display:flex屬性,令其內(nèi)部元素橫向排列。同時(shí),使用overflow-x:scroll屬性實(shí)現(xiàn)橫向滾動(dòng)功能,并使用scroll-behavior:smooth平滑滾動(dòng)。為了讓圖片不換行,我們使用white-space:nowrap屬性。
對(duì)于每張圖片,我們可以使用img標(biāo)簽,并設(shè)置寬高以及object-fit:cover等屬性來(lái)適應(yīng)不同的圖片大小。同時(shí),為了讓圖片之間有一定的間距,我們可以為其添加margin-right:10px屬性。
最后,我們將圖片通過(guò)HTML代碼嵌入到容器元素中即可。
通過(guò)以上CSS和HTML代碼,我們可以輕松地實(shí)現(xiàn)一組圖片的橫向無(wú)限滾動(dòng)效果。