在網頁設計中，圖片切換是比較常用的交互效果。實現圖片切換的方式有很多，其中最常見的就是使用 CSS 和 JavaScript。我們可以使用 CSS 的 :hover 偽類來實現鼠標懸停時圖片的切換，也可以使用 JavaScript 來制作更加靈活的圖片輪播效果。

下面我們來看一些實現圖片切換的代碼示例。

/* 使用 CSS 的 :hover 偽類實現圖片切換 */
.image-switcher {
width: 200px;
height: 200px;
background-image: url("image1.jpg");
background-size: cover;
}
.image-switcher:hover {
background-image: url("image2.jpg");
}

上面的代碼是使用 CSS 的 :hover 偽類實現圖片切換的示例。我們首先定義了一個大小為 200x200 像素的塊級元素，并且將其背景圖設置為 image1.jpg。當鼠標懸停在該元素上時，我們通過 :hover 偽類將該元素的背景圖替換為 image2.jpg。這樣就能實現圖片的切換了。

// 使用 JavaScript 實現圖片輪播效果
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var currentIndex = 0;
function changeImage() {
var image = document.getElementById("my-image");
image.src = images[currentIndex];
currentIndex++;
if (currentIndex == images.length) {
currentIndex = 0;
}
}
setInterval(changeImage, 5000);

上面的代碼則是使用 JavaScript 實現圖片輪播效果的示例。我們首先定義了一個包含四個圖片名稱的數組 images，并且定義了一個變量 currentIndex 來記錄當前顯示的圖片下標。在 changeImage 函數中，我們通過獲取 id 為 my-image 的 img 元素來實現圖片的切換，并且使用 setInterval 函數來定時切換圖片。當到達最后一張圖片時，我們通過對 currentIndex 的重置來實現無限循環播放。

總的來說， CSS 和 JavaScript 都是實現圖片切換效果的常用方法，具體應該根據實際需求和開發經驗來選擇。