HTML左右圖片滾動代碼是一種常見的網頁設計效果，它可以讓圖片輪流滾動顯示，給人們帶來新鮮感和美感。以下是一個HTML左右圖片滾動代碼的樣例：

<div>
<h2>圖片滾動展示</h2>
<div class="container">
<div class="slider">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
</div>
</div>
</div>
<style>
.container {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slider {
width: 500%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: slide 30s infinite;
}
.slider img {
width: 20%;
height: 100%;
float: left;
}
@keyframes slide {
0%, 100% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-20%);
}
45% {
transform: translateX(-20%);
}
50% {
transform: translateX(-40%);
}
70% {
transform: translateX(-40%);
}
75% {
transform: translateX(-60%);
}
95% {
transform: translateX(-60%);
}
100% {
transform: translateX(0);
}
}
</style>

首先，在HTML中，我們需要創建一個`div`元素作為容器，然后在容器內部創建一個`h2`元素用于顯示標題，以及一個`div`元素作為圖片滾動展示的區域。接著，在`div`元素中創建一個名為`slider`的`div`元素用于顯示圖片，然后在`slider`元素內部創建多個`img`元素，并為它們設置`src`屬性和`alt`屬性，用于加載和顯示圖片。 接下來，在CSS中，我們需要設置容器元素的寬度、高度和溢出屬性，以及圖片展示區域元素的寬度、高度和定位屬性。同時，我們也需要為`slider`元素設置寬度、高度、定位屬性和動畫屬性。在這里，我們使用了`animation`屬性對`slider`元素進行輪流移動的動畫設置。 最后，在CSS中定義`slider`元素的圖片樣式，使用`float`屬性使圖片左浮，同時，我們還需要使用`@keyframes`屬性來設置動畫效果。通過使用`transform`屬性和`translateX`函數，我們可以讓`slider`元素實現水平滾動效果。 總的來說，HTML左右圖片滾動代碼并不復雜，只需要按照以上樣例代碼的結構和CSS設置即可實現該效果。