HTML簡單圖片切換代碼 在網頁設計中，經常需要使用圖片切換功能，以讓用戶更好地了解產品或服務。在HTML中實現圖片切換功能非常簡單，以下是一段樣例代碼：

圖片切換功能：

<div id="img-box">
<img id="img-1" src="image1.jpg">
<img id="img-2" src="image2.jpg">
<img id="img-3" src="image3.jpg">
</div>
<br>
<button onclick="changeImg()">切換圖片</button>
<script>
var imgNumber = 1;
function changeImg() {
if (imgNumber == 1) {
document.getElementById("img-1").style.display = "none";
document.getElementById("img-2").style.display = "block";
imgNumber = 2;
} else if (imgNumber == 2) {
document.getElementById("img-2").style.display = "none";
document.getElementById("img-3").style.display = "block";
imgNumber = 3;
} else if (imgNumber == 3) {
document.getElementById("img-3").style.display = "none";
document.getElementById("img-1").style.display = "block";
imgNumber = 1;
}
}
</script>

以上代碼中，我們首先創建一個包含三個圖片的div元素，并給每個圖片添加一個唯一的id，然后添加一個按鈕，用于觸發切換圖片的函數。在js腳本中，我們定義了一個切換圖片的函數，每次點擊按鈕都會改變img標簽的display屬性，以此達到切換圖片的效果。 這是一個非常簡單的實現，如果需求更加復雜，可根據實際情況進行修改和擴展。同時，我們也可以通過添加動畫等效果，讓圖片更加生動有趣。