圖片是網頁設計中必不可少的一部分，而讓圖片左右翻頁可以給用戶帶來更好的閱讀體驗。接下來，我們來介紹如何使用HTML設置圖片左右翻頁。

<div class="container">
<img src="image1.jpg" class="img">
<div class="btn left"></div>
<div class="btn right"></div>
</div>

首先，我們需要創建一個容器來包含圖片和翻頁按鈕，這里我們使用div標簽，并添加class屬性。接著，在容器中添加img標簽來展示圖片。在圖片下方，我們需要創建兩個按鈕：一個是向左箭頭，另一個是向右箭頭。這里我們使用div標簽，并添加class屬性分別為left和right。

.container {
position: relative;
}
.img {
text-align: center;
vertical-align: middle;
}
.btn {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
background: url('arrow.png') no-repeat;
cursor: pointer;
}
.left {
left: 0;
}
.right {
right: 0;
background-position: -50px 0;
}

接下來，我們需要編寫CSS樣式來使圖片和按鈕處于合適的位置，并且設置按鈕的樣式。我們首先將容器設置為相對位置，以便我們對內部元素進行絕對定位。圖片使用text-align和vertical-align屬性使其在容器中居中顯示。我們還為按鈕設置絕對位置，并通過top和margin-top屬性使它們垂直居中。此外，我們設置了每個按鈕的寬度和高度，并為其添加一個background屬性，其中包含指向我們所使用的箭頭圖像的URL。left類的按鈕位于容器的左側，而right類的按鈕位于右側，需使用background-position屬性調整箭頭的位置。

$(document).ready(function() {
var imgWidth = $('.img').width();
$('.btn').click(function() {
var currentImg = $('.img');
if ($(this).hasClass('right')) {
currentImg.animate({
'left': '-=' + imgWidth
});
} else {
currentImg.animate({
'left': '+=' + imgWidth
});
}
});
});

最后，我們需要加入JavaScript代碼，使按鈕與圖片相關聯。當點擊左箭頭時，圖片將向右移動一個圖片的距離，而當點擊右箭頭時，圖片將向左移動一個圖片的距離。這里我們使用jQuery的animate()函數來實現動畫效果。

經過上述步驟，我們成功地實現了在HTML中實現圖片左右翻頁，在用戶界面上提供了更好的用戶體驗。