HTML左右輪播圖是一種常用的網(wǎng)頁(yè)設(shè)計(jì)元素，它可以讓網(wǎng)頁(yè)更加動(dòng)態(tài)和吸引人。以下是一個(gè)簡(jiǎn)單的左右輪播圖示例：

<div class="slider">
<div class="slider-wrap">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>
<div class="slider-nav">
<button class="prev"></button>
<button class="next"></button>
</div>
</div>
<style>
.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap {
width: 300%;
height: 100%;
position: absolute;
left: -100%;
transition: left 1s;
}
.slider-wrap ul {
list-style: none;
width: 33.3333%;
height: 100%;
float: left;
}
.slider-wrap li {
width: 100%;
height: 100%;
}
.slider-nav {
position: absolute;
width: 100%;
height: 80px;
bottom: 0;
left: 0;
text-align: center;
}
.slider-nav button {
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: #fff;
font-size: 24px;
line-height: 80px;
width: 40px;
height: 80px;
cursor: pointer;
position: absolute;
top: 0;
}
.slider-nav .prev {
left: 0;
}
.slider-nav .next {
right: 0;
}
</style>

上述代碼中，我們首先創(chuàng)建了一個(gè)類名為“slider”的div元素，并在其中嵌套了一個(gè)類名為“slider-wrap”的div元素和一個(gè)類名為“slider-nav”的div元素。其中，“slider-wrap”元素中嵌套了一個(gè)包含三個(gè)li元素的ul列表，每個(gè)li元素內(nèi)部都有一個(gè)img元素，用于展示輪播圖的圖片。而“slider-nav”元素中則包含了兩個(gè)button元素，用于向左和向右滾動(dòng)圖片。

此外，我們還定義了一些樣式規(guī)則，例如將“slider”元素的寬度設(shè)置為100%、高度設(shè)置為400px，并將其設(shè)為relative定位以便在其中定位其他元素。同時(shí)，我們將“slider-wrap”元素的寬度設(shè)置為300%（相當(dāng)于三倍于“slider”元素的寬度），將其設(shè)為absolute定位，并將其left值設(shè)置為-100%。這樣做的目的是將最左邊的圖片向左移出屏幕，以便在展示之后通過(guò)改變其left值使它進(jìn)入屏幕內(nèi)。

接下來(lái)，我們定義了“slider-wrap”元素中的ul、li和img元素的樣式，用于調(diào)整輪播圖的大小和布局。此外，我們還定義了“slider-nav”元素中button元素的樣式，來(lái)實(shí)現(xiàn)向左和向右滾動(dòng)圖片的功能。