在網頁開發中，經常需要使用到點擊按鈕切換圖片的功能。這種效果可以使用CSS來實現，具體實現步驟如下：

.image-container {
position: relative;
width: 500px;
height: 300px;
}
.button1,
.button2 {
position: absolute;
top: 0;
padding: 10px;
background-color: #fff;
cursor: pointer;
}
.button1 {
left: 0;
}
.button2 {
right: 0;
}
.image1,
.image2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.image1.active,
.image2.active {
opacity: 1;
}

在代碼中，我們首先定義了一個.image-container，用來包含要切換的圖片。然后分別定義了兩個按鈕.button1和.button2，分別用來控制切換到第一張圖片和第二張圖片。

為了實現用按鈕控制圖片的切換，我們定義了兩張圖片.image1和.image2，這里需要注意設置圖片的位置為absolute，并且設置opacity: 0;來隱藏圖片。

接著，在 CSS 中通過添加.active類來實現圖片的切換，例如當點擊按鈕一時，就會給.image1添加.active類，這樣就會讓.image1漸漸出現，而.image2漸漸消失，從而實現了點擊按鈕切換圖片的效果。

除了上述的切換圖片的實現方法，還可以通過 JavaScript 來實現。無論采用哪種方式，都可以讓網頁更加動態和生動，提升用戶的使用體驗。