HTML實現圖片切換功能是網頁設計中常用的一種交互方式，本文將為大家講解如何使用HTML實現此功能。
<html>
<head>
<title>圖片切換</title>
<script>
var index = 0; //定義索引
var imgArr = new Array("img1.jpg","img2.jpg","img3.jpg"); //定義圖片數組
function changeImg(){ //定義切換圖片函數
index++; //每次調用將索引加1
if(index >= imgArr.length){ //如果索引超過數組長度，將索引設置為0，即從頭開始切換
index = 0;
}
document.getElementById("img").setAttribute("src",imgArr[index]); //通過getElementById()方法獲取圖片元素，設置src屬性即可切換圖片
}
</script>
</head>
<body>
<img id="img" src="img1.jpg" /> //定義img標簽，設置id和src屬性
<button onclick="changeImg()">切換圖片</button> //定義button標簽，設置onclick屬性，調用changeImg()函數
</body>
</html>以上代碼中，我們首先定義了一個包含三張圖片的數組imgArr，以及一個初始索引值為0的變量index。接著我們寫了一個changeImg()函數，每次調用該函數都會將索引值加1，并判斷索引是否超過數組長度。最后通過getElementById()方法獲取圖片元素，設置src屬性即可實現圖片的切換。在HTML中，我們創建一個img標簽用于展示圖片，設置id和src屬性；然后創建一個button標簽用于切換圖片，并設置onclick屬性調用changeImg()函數。在點擊按鈕時，就可以切換展示的圖片了。