在網頁設計中，左右圖片滾動是一種常見的效果，可以讓頁面更加生動有趣。下面，我們將介紹如何使用HTML實現左右圖片滾動效果。

<div class="scroll">
<a href="#"><img src="image1.jpg" alt="圖片一"></a>
<a href="#"><img src="image2.jpg" alt="圖片二"></a>
<a href="#"><img src="image3.jpg" alt="圖片三"></a>
<a href="#"><img src="image4.jpg" alt="圖片四"></a>
<a href="#"><img src="image5.jpg" alt="圖片五"></a>
<a href="#"><img src="image6.jpg" alt="圖片六"></a>
<a href="#"><img src="image7.jpg" alt="圖片七"></a>
<a href="#"><img src="image8.jpg" alt="圖片八"></a>
</div>

在上面的代碼中，我們使用了<div>標簽來創建一個包含多張圖片的容器，并為該容器添加了一個class為“scroll”的樣式類，該樣式類將在CSS中定義。

在容器中嵌套了多個<a>標簽，每個<a>標簽中包含一張圖片。同時，在每個<a>標簽中，我們將圖片的路徑和描述信息都添加了一個alt屬性，以確保圖片在無法顯示時有一些替代文本。

.scroll {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding: 1em;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
.scroll a {
display: inline-block;
margin-right: 1em;
text-decoration: none;
}

上面是樣式表中的樣式代碼。首先，我們為樣式類“scroll”設置了white-space: nowrap，使得其中的所有元素都不會換行，而是在一行中水平排列。

然后，我們為該樣式類設置了overflow-x: auto，使得內容在水平方向上超出容器時，會自動出現滾動條，方便用戶查看。同時，我們為該樣式類也設置了overflow-y: hidden，以確保容器不會在垂直方向上出現滾動條。

接下來，我們為該樣式類的字體大小、背景色、邊框等屬性設置了一些樣式，并為其中的所有<a>標簽設置了display: inline-block，使得這些標簽也能在一行中水平排列。同時，我們也為每個<a>標簽設置了一些樣式，包括外邊距和文字修飾等。

最終，我們可以通過將上述代碼保存為一個HTML文件，并在瀏覽器中打開該文件，就可以看到一個帶有左右圖片滾動效果的頁面。