在網頁設計中，圖片輪播是一個常見的需求，可以讓頁面更加動態，吸引人眼球。本文將介紹使用CSS實現手動輪播的代碼。

首先，我們需要準備好要輪播的圖片，可以使用CSS中的background-image屬性來設置。具體操作如下：

.image1 {
background-image: url('image1.jpg');
// 其他樣式
}
.image2 {
background-image: url('image2.jpg');
// 其他樣式
}
.image3 {
background-image: url('image3.jpg');
// 其他樣式
}
// 其他圖片樣式省略

接下來，我們需要創建一個容器元素，用來包裹所有圖片。我們將容器元素的寬度設置為一張圖片的寬度，高度設置為一張圖片的高度，同時設置overflow為hidden，這樣就可以實現圖片輪播的效果了。

.container {
width: 500px; // 假設每張圖片寬度為500px
height: 300px; // 假設每張圖片高度為300px
overflow: hidden;
}

為了實現手動輪播，我們需要給容器元素添加一些額外的樣式，以實現“切換”圖片的效果。具體操作如下：

.container {
position: relative; // 設置相對定位
}
.container .image {
position: absolute; // 設置絕對定位
top: 0;
left: 0;
opacity: 0; // 初始狀態為不可見
transition: opacity 0.5s; // 設置過渡效果
}
.container .active {
opacity: 1; // 當前圖片設置為可見狀態
}

現在，我們已經完成了手動輪播所需的樣式代碼。接下來，我們需要用一些JavaScript代碼來實現“切換圖片”的效果。具體操作如下：

var images = document.querySelectorAll('.image');
var container = document.querySelector('.container');
var current = 0;
function showImage(index) {
images[current].classList.remove('active');
images[index].classList.add('active');
current = index;
}
container.addEventListener('click', function() {
var index = (current + 1) % images.length;
showImage(index);
});

完成以上操作后，我們就成功地實現了一個基于CSS的手動輪播效果。當我們點擊圖片容器元素時，圖片就會切換為下一張。