HTML5圖文左右輪播是一種非常常見的網(wǎng)頁(yè)效果，可以讓頁(yè)面更加生動(dòng)有趣。下面我們來(lái)介紹一下如何實(shí)現(xiàn)此效果。

首先，我們需要使用HTML5的figure和figcaption標(biāo)簽來(lái)添加圖片和圖片的標(biāo)題。代碼如下：

<div class="slider">
<figure>
<img src="image1.jpg" alt="Image 1">
<figcaption>Image 1 Caption</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt="Image 2">
<figcaption>Image 2 Caption</figcaption>
</figure>
<figure>
<img src="image3.jpg" alt="Image 3">
<figcaption>Image 3 Caption</figcaption>
</figure>
</div>

接下來(lái)，我們需要使用CSS樣式來(lái)添加輪播效果。具體的實(shí)現(xiàn)方法可以參考下面的代碼：

.slider {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
width: 100%;
height: 300px;
}
figure {
width: 100%;
flex-shrink: 0;
margin-right: 10px;
scroll-snap-align: start;
}
figcaption {
text-align: center;
}

在以上代碼中，我們使用flex屬性來(lái)設(shè)置容器的樣式，使用scroll-snap-type和scroll-snap-align屬性來(lái)控制滾動(dòng)的對(duì)齊方式，實(shí)現(xiàn)左右輪播的效果。

最后，我們需要使用JavaScript來(lái)添加自動(dòng)輪播的功能。具體代碼如下：

const slider = document.querySelector('.slider');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) =>{
isDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () =>{
isDown = false;
});
slider.addEventListener('mouseup', () =>{
isDown = false;
});
slider.addEventListener('mousemove', (e) =>{
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
setInterval(() =>{
slider.scrollLeft += 1;
}, 50);

在以上代碼中，我們使用事件監(jiān)聽來(lái)判斷用戶是否按下了鼠標(biāo)，從而讓頁(yè)面進(jìn)行滾動(dòng)。同時(shí)還使用了setInterval函數(shù)來(lái)實(shí)現(xiàn)自動(dòng)輪播的效果。

通過(guò)以上的代碼和樣式，我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的HTML5圖文左右輪播效果。