HTML 左右輪播是網頁設計中常用的一種效果，可以實現圖片或文本在頁面上左右滑動的效果。下面介紹一種基于 HTML 和 CSS 的簡單的左右輪播代碼示例。

<!--HTML結構--><div class="carousel"><ul class="carousel-list"><li><img src="img1.jpg" alt="img1"></li><li><img src="img2.jpg" alt="img2"></li><li><img src="img3.jpg" alt="img3"></li><li><img src="img4.jpg" alt="img4"></li></ul></div>

首先我們需要在 HTML 中用 ul 和 li 標簽來構建輪播圖的圖片列表，然后使用 CSS 來對其進行樣式設置。

.carousel-list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.carousel-list li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.carousel-list li img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel-list {
width: 400%;
left: -100%;
position: absolute;
transition: all 0.5s ease;
}
.carousel-list li {
display: inline-block;
float: left;
}

上述 CSS 代碼中，我們對輪播圖容器和圖片列表的樣式進行了設置，其中使用了 position、width、height 等屬性控制圖片列表的顯示方式和大小，使用 overflow 屬性來隱藏容器多余部分，將圖片調整為覆蓋整個容器，并使用 object-fit 屬性來控制圖片顯示方式。另外在.carousel-list 類中還設置了寬度為 400%，left 值為 -100% 的實現輪播的效果，使用 transition 來實現動畫效果，.carousel-list li 類設置為 inline-block 和 float: left，使得圖片水平排列。

最后加入 JavaScript 代碼實現圖像的自動輪播功能。

<script>let carouselList = document.querySelector('.carousel-list');
let carouselIndex = 0;
let carouselTimer;
//圖片輪播函數
function showNext() {
if (carouselIndex >= 4) {
carouselIndex = 0;
}
carouselIndex++;
carouselList.style.left = -carouselIndex * 100 + '%';
carouselTimer = setTimeout(showNext, 5000);
}
//開啟輪播
function startCarousel() {
if (carouselTimer) {
clearTimeout(carouselTimer);
}
carouselTimer = setTimeout(showNext, 5000);
}
//結束輪播
function stopCarousel() {
if (carouselTimer) {
clearTimeout(carouselTimer);
}
}
startCarousel();
</script>

代碼中的 showNext() 函數控制輪播圖的滾動效果，startCarousel() 開啟自動輪播，stopCarousel() 則停止輪播。最后通過調用 startCarousel() 開啟自動輪播功能。