CSS作為前端開發中重要的一環，除了樣式設計外，控制圖片等多媒體元素的切換也是其重要功能之一。下面我們就來看看如何使用CSS來控制圖片的切換。

/* HTML結構 */
<div class="wrapper">
<img src="img1.png" alt="image 1" class="active">
<img src="img2.png" alt="image 2">
<img src="img3.png" alt="image 3">
<img src="img4.png" alt="image 4">
<img src="img5.png" alt="image 5">
</div>

我們首先要在CSS中添加如下樣式：

.wrapper img:not(.active) {
display: none;
}

這段CSS代碼的作用是將除了class為active的圖片元素都隱藏，只顯示class為active的圖片。

接下來，我們通過JavaScript來控制圖片的切換。

// 獲取HTML元素
const images = document.querySelectorAll('.wrapper img');
const activeImg = document.querySelector('.active');
let index = 0; // 初始圖片序號
// 切換圖片的函數
function switchImg() {
images[index].classList.remove('active'); // 隱藏當前圖片
index = (index + 1) % images.length; // 計算下一張圖片的序號
images[index].classList.add('active'); // 顯示下一張圖片
}
// 定時切換圖片
setInterval(switchImg, 5000);

以上的代碼實現了圖片的輪播功能，通過CSS來隱藏和顯示圖片元素，通過JavaScript來控制圖片的切換。我們可以調整定時切換圖片的時間來控制圖片的切換速度。

以上就是如何使用CSS來控制圖片的切換的方法，希望對你有所幫助！