網頁中經常需要展示多張圖片，一種常用的方式是通過切換來展示不同的圖片。這種切換效果可以使用 CSS 來實現，本文就介紹一下如何使用 CSS 來實現圖片之間的切換。

首先，在 HTML 文件中準備好需要展示的圖片。我們可以使用 img 標簽來插入圖片，并使用 id 屬性給每張圖片取一個唯一的標識符。

<img id="pic1" src="1.jpg" alt="pic1">
<img id="pic2" src="2.jpg" alt="pic2">
<img id="pic3" src="3.jpg" alt="pic3">

接著，在 CSS 文件中使用 display 屬性來控制圖片的顯示和隱藏。

img {
display: none;
}
#pic1 {
display: block;
}

這段 CSS 代碼的作用是將所有的圖片都隱藏起來，然后將第一張圖片（id 為 pic1）顯示出來。

接下來，我們需要使用 JavaScript 來控制圖片的切換。我們可以給一個按鈕加上點擊事件，在點擊按鈕時將當前顯示的圖片隱藏，然后將下一張圖片（或者第一張圖片）顯示出來。

<button id="btn">Click me</button>
<script>
var i = 1;
var btn = document.getElementById('btn');
btn.onclick = function() {
var currentPic = document.getElementById('pic' + i);
currentPic.style.display = 'none';
i++;
if (i >3) {
i = 1;
}
var nextPic = document.getElementById('pic' + i);
nextPic.style.display = 'block';
}
</script>

這段 JavaScript 代碼的作用是給 ID 為 btn 的按鈕加上點擊事件，每次點擊時將當前顯示的圖片隱藏起來，然后將下一張圖片顯示出來。注意，我們給每張圖片都定義了一個唯一的 ID，所以可以通過拼接字符串的方式來獲取圖片元素。

到此為止，我們就成功地實現了圖片之間的切換效果。這種切換方式不僅優雅美觀，而且代碼簡單易懂，非常適合入門級開發者學習。