HTML 設置點擊切換圖片
<!DOCTYPE html>
<html>
<head>
<title>點擊切換圖片</title>
<style>
img {
display: none;
}
img.active {
display: block;
}
</style>
</head>
<body>
<img class="active" src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<button onclick="nextImage()">下一張</button>
<script>
var currentImage = 1;
function nextImage() {
var images = document.getElementsByTagName("img");
images[currentImage - 1].classList.remove("active");
currentImage++;
if (currentImage > images.length) {
currentImage = 1;
}
images[currentImage - 1].classList.add("active");
}
</script>
</body>
</html>解釋：
首先，在CSS中，我們將所有圖片的顯示設置為none，然后添加了一個.active類，用于將活動圖片的顯示設置為block。
在HTML部分，我們先顯示第一張圖片，并將.active類添加到該圖片。然后，我們在其余兩張圖片中添加了一個src屬性，但沒有添加.active類，因此它們不會顯示在頁面上。
在按鈕的onclick屬性中，我們將調用nextImage()函數。在JS部分，我們創建了一個名為currentImage的變量，并將其設置為1。此外，我們創建了一個名為nextImage()的函數，該函數執行以下操作：
- 獲取頁面上的所有圖片元素
- 從當前活動圖片中刪除.active類
- 將currentImage加1
- 如果currentImage大于圖片數量，則將其設置為1（這樣我們可以循環到第一張圖片）
- 將.active類添加到新的活動圖片
通過這種方式，我們可以切換三張圖片的顯示。
上一篇html 不顯示代碼
下一篇html 代碼 解壓縮