CSS可以輕松地實現(xiàn)點擊事件換圖片，這樣在網(wǎng)站中實現(xiàn)圖片點擊切換功能就變得十分容易。

HTML代碼：
<div class="pic">
<img src="image1.jpg" alt="Image 1">
</div>
<button id="btn">切換圖片</button>
CSS代碼：
.pic img:nth-of-type(n+2) {
display: none;
}
.pic.active img:first-of-type {
display: none;
}
.pic.active img:nth-of-type(n+2) {
display: block;
}
#btn {
margin-top: 20px;
}
JavaScript代碼：
document.getElementById("btn").addEventListener("click", function() {
document.querySelector(".pic").classList.toggle("active");
});

首先，在HTML中創(chuàng)建一個包含兩個或更多圖片的DIV，并給它們添加一個共同的類。其次，在CSS中對第二個和之后的圖片進行隱藏，僅顯示第一張圖片。然后，創(chuàng)建一個按鈕，給它一個ID，用作切換圖片時的觸發(fā)器。

接下來，在Javascript中，在點擊按鈕時，通過使用classList.toggle()方法，向包含圖片的DIV添加或刪除“active”類。最后，通過為.active類設置一個新的CSS規(guī)則，使除第一張外的所有其他圖片都顯示出來。