HTML中實現左右點擊切換圖片是非常常見的需求，下面我們來介紹一種簡單實現方式。
<html>
<head>
<title>左右點擊切換圖片</title>
<script type="text/javascript">
var index = 0; //圖片序號
var imgArr = ["img1.jpg", "img2.jpg", "img3.jpg"]; //圖片數組
function changeImg(direction) {
var img = document.getElementById("img");
if (direction == "prev") { //向前切換
index--;
if (index < 0) {
index = imgArr.length - 1;
}
img.src = "images/" + imgArr[index];
} else if (direction == "next") { //向后切換
index++;
if (index >= imgArr.length) {
index = 0;
}
img.src = "images/" + imgArr[index];
}
}
</script>
</head>
<body>
<div id="container">
<img id="img" src="images/img1.jpg" />
<div id="prev" onclick="changeImg('prev')"></div> //向前切換按鈕
<div id="next" onclick="changeImg('next')"></div> //向后切換按鈕
</div>
</body>
</html>在代碼中，我們首先定義了一個圖片序號變量index和一個包含圖片鏈接的數組imgArr。然后，在changeImg函數中根據傳入的參數direction向前或向后切換圖片，同時更新當前圖片序號和圖片的src屬性。最后，在HTML中利用div和onclick事件監聽實現了向前和向后切換圖片的按鈕。
注意，這里的圖片鏈接要根據實際情況修改，可以把圖片放到項目文件夾下的images文件夾中。
下一篇html心形立體代碼