HTML5圖片按鈕滾動代碼 在網頁設計中，圖片按鈕滾動是一個常見的功能。當一個頁面中有多張圖片，但空間有限，無法全部展示時，我們可以使用圖片按鈕滾動。用戶可以通過點擊左右按鈕來瀏覽所有的圖片。下面我們來看一下如何使用HTML5實現這個功能。 首先，我們需要在HTML文件中添加一些必要的元素。我們可以使用一個< div>元素來包含所有的圖片。我們還需要添加兩個按鈕來控制滾動。這樣我們的HTML代碼就應該像下面這樣：

<div class="image-container">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
<button id="prev-btn"> < </button>
<button id="next-btn"> > </button>

接下來，我們需要為左右按鈕添加一些JavaScript代碼。當左側按鈕被點擊時，我們需要將圖片的位置向左滾動一個圖像的寬度。當右側按鈕被點擊時，我們需要將圖片的位置向右滾動一個圖像的寬度。同時，我們需要檢查邊界，以確保用戶不能滾動超過第一個或最后一個圖像。下面是我們需要添加的JavaScript代碼。

const container = document.querySelector('.image-container');
const prevBtn = document.querySelector('#prev-btn');
const nextBtn = document.querySelector('#next-btn');
const imgWidth = container.clientWidth;
let currentPosition = 0;
prevBtn.addEventListener('click', () =>{
currentPosition += imgWidth;
if (currentPosition >0) {
currentPosition = 0;
}
container.style.transform = `translateX(${currentPosition}px)`;
});
nextBtn.addEventListener('click', () =>{
currentPosition -= imgWidth;
const containerWidth = container.scrollWidth;
const maxPosition = containerWidth - imgWidth;
if (currentPosition< -maxPosition) {
currentPosition = -maxPosition;
}
container.style.transform = `translateX(${currentPosition}px)`;
});

最后，我們需要在CSS文件中為< div>和按鈕添加樣式。我們需要將< div>元素設置為具有固定寬度和可滾動的樣式。我們還需要將按鈕定位在< div>元素上方并進行樣式設計。下面是我們需要添加的CSS代碼。

.image-container {
width: 600px;
overflow-x: scroll;
white-space: nowrap;
}
img {
width: 100%;
height: auto;
display: inline-block;
}
#prev-btn, #next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
border: none;
font-size: 20px;
color: #333;
cursor: pointer;
}
#prev-btn:hover, #next-btn:hover {
background: rgba(255, 255, 255, 0.9);
color: #fff;
}

現在，我們已經完成了使用HTML5實現圖片按鈕滾動的代碼！我們可以根據需要對其進行更多的樣式設計，例如更改按鈕形狀、顏色等。希望這篇文章能對你有所幫助！