HTML5是目前開發網頁的最新標準,它提供了很多強大的功能。其中之一就是滾動圖片功能。下面是一段HTML5滾動圖片的代碼:
<html> <head> <style> #scrolling-images { width: 500px; height: 300px; overflow-x: scroll; white-space: nowrap; } #scrolling-images img { display: inline-block; height: 300px; width: 500px; margin: 0 10px; } </style> </head> <body> <div id="scrolling-images"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5.jpg"> </div> </body> </html>
上述代碼中,我們使用了CSS屬性overflow-x: scroll
來實現水平滾動。而如何讓圖片在一行內排列呢?我們使用CSS屬性white-space: nowrap
禁止換行,再加上display: inline-block
將圖片排成一行。
這是一個簡單而強大的HTML5滾動圖片功能,如果需要自定義樣式和自己的圖片,只需要更改相應代碼即可。