今天我們來(lái)學(xué)習(xí)一下如何在HTML中切換圖片。首先，我們需要明確一下什么是切換圖片。切換圖片指的是通過(guò)點(diǎn)擊按鈕或其他交互方式，切換頁(yè)面上的圖片。下面我們來(lái)看一下具體實(shí)現(xiàn)的代碼。
首先，我們需要在HTML中添加一對(duì)圖片標(biāo)簽和一個(gè)按鈕標(biāo)簽，代碼如下：
<img id="img1" src="image1.jpg" alt="圖片1"> <button onclick="changeImage()">切換圖片</button>在這段代碼中，img標(biāo)簽用來(lái)展示我們要切換的圖片，button標(biāo)簽用來(lái)觸發(fā)切換圖片的事件。為了方便操作，我們給img標(biāo)簽添加了一個(gè)id屬性，并設(shè)置為“img1”。 接下來(lái)，我們需要在JavaScript中編寫changeImage()函數(shù)，用來(lái)切換圖片。代碼如下：
function changeImage() {
var img = document.getElementById("img1");
if (img.src.match("image1")) {
img.src = "image2.jpg";
img.setAttribute("alt", "圖片2");
} else {
img.src = "image1.jpg";
img.setAttribute("alt", "圖片1");
}
}在這段代碼中，我們首先通過(guò)getElementById獲取到id為“img1”的圖片元素，然后判斷當(dāng)前圖片的src屬性是否包含“image1”。如果是，則將圖片的src屬性修改為“image2.jpg”，并將alt屬性修改為“圖片2”。如果不是，則將圖片的src屬性修改為“image1.jpg”，并將alt屬性修改為“圖片1”。
最后，我們需要將JavaScript代碼放到HTML文件中，代碼如下：<html> <head> <script src="changeImage.js"></script> </head> <body> <img id="img1" src="image1.jpg" alt="圖片1"> <button onclick="changeImage()">切換圖片</button> </body> </html>在這段代碼中，我們將changeImage()函數(shù)從單獨(dú)的JavaScript文件中引入進(jìn)來(lái)，然后放置在HTML文件的body標(biāo)簽中，以便用戶可以操作并查看效果。 以上就是使用HTML切換圖片的方法。大家可以參考本文提供的代碼進(jìn)行實(shí)踐和進(jìn)一步探索。