HTML點擊切換圖片是一個常用的功能，可以方便地在網(wǎng)頁中展示多張圖片以及實現(xiàn)相冊的效果。下面我們來介紹幾種常用的HTML點擊切換圖片的代碼實現(xiàn)。
<!DOCTYPE html>
<html>
<head>
<title>HTML點擊切換圖片</title>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
</script>
</head>
<body>
<img id="myImage" onclick="changeImage()" src="image1.jpg" height="200" width="300">
</body>
</html>上面的代碼使用了JavaScript來實現(xiàn)圖片的切換。首先使用一個標(biāo)簽顯示圖片，
標(biāo)簽的id為myImage，點擊時會執(zhí)行changeImage函數(shù)。函數(shù)中首先使用document.getElementById('myImage')獲取圖片對象，判斷圖片src屬性中是否包含"image1"，如果包含則將圖片切換為"image2.jpg"，否則切換為"image1.jpg"。
<!DOCTYPE html>
<html>
<head>
<title>HTML點擊切換圖片</title>
</head>
<body>
<input type="button" onclick="changeImage()" value="點擊切換圖片">
<img id="myImage" src="image1.jpg" height="200" width="300">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
</script>
</body>
</html>上面的代碼使用了一個標(biāo)簽作為點擊按鈕，通過調(diào)用changeImage函數(shù)實現(xiàn)圖片的切換。
<!DOCTYPE html>
<html>
<head>
<title>HTML點擊切換圖片</title>
</head>
<body>
<ul>
<li onclick="changeImage('image1.jpg')">圖片1</li>
<li onclick="changeImage('image2.jpg')">圖片2</li>
</ul>
<img id="myImage" src="image1.jpg" height="200" width="300">
<script>
function changeImage(image) {
var img = document.getElementById('myImage');
img.src = image;
}
</script>
</body>
</html>上面的代碼使用了一個列表，每個列表項都是一個圖片的名稱，并且使用onclick事件調(diào)用changeImage函數(shù)來切換圖片。當(dāng)點擊一個列表項時，傳遞對應(yīng)的圖片名稱作為函數(shù)的參數(shù)，函數(shù)中使用document.getElementById('myImage')獲取圖片對象，并將src屬性設(shè)為傳遞進(jìn)來的圖片名稱。