HTML5 左右滾動圖片是一個非常實用的功能，許多網站都會使用。你是否想知道如何制作這樣的效果呢？下面是一個簡單的示例代碼，供您參考。 首先，我們需要創建一個 div 元素來容納圖片。我們可以給它一個特定的 ID，以便在 CSS 中引用它。如下所示：

<div id="main"></div>

接下來，我們需要在 div 中插入圖片。圖片應該作為 div 的子元素呈現。如下所示：

<div id="main">
<img src="image.jpg" />
</div>

現在我們需要使用 CSS 來創建滾動效果。我們可以使用 overflow 屬性來實現。我們將設置為 visible，然后使用 white-space 屬性來強制將所有子元素顯示在同一行上。

<style>
#main {
white-space: nowrap;
overflow-x: scroll;
}
</style>

最后，我們需要調整圖片的大小，以便它們可以在 div 中合適地顯示。我們可以使用 max-width 屬性來限制圖片的寬度。如下所示：

<style>
#main {
white-space: nowrap;
overflow-x: scroll;
}
#main img {
max-width: 100%;
}
</style>

完成了！您現在可以通過以下代碼在您的網站上創建左右滾動圖片。

<div id="main">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
<style>
#main {
white-space: nowrap;
overflow-x: scroll;
}
#main img {
max-width: 100%;
}
</style>

HTML5 左右滾動圖片非常簡單，您只需按照上述步驟即可。希望這篇文章可以幫助您在您的網站上創造更加豐富多彩的效果。