CSS是現代網頁設計的基礎技術之一。有時候我們需要在網頁上顯示一些圖片，而手動輪播則是一個常見的需求。下面我們來講一下如何用CSS實現手動輪播功能。

HTML代碼：
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
CSS代碼：
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 1s ease;
}
.slider img.active {
opacity: 1;
}

首先我們需要一個容器來放置圖片，這里我們使用一個div元素，添加一個class為slider。接下來在這個div元素內放置需要輪播的圖片，每個圖片添加一個img元素。我們可以在CSS中設置slider的寬度和高度來控制圖片輪播容器的大小。為了在容器內顯示圖片，我們需要使用CSS的overflow:hidden屬性來隱藏圖片超出容器大小部分。

接下來我們需要在CSS中讓圖片堆疊起來，并且一開始只顯示第一張圖片。我們可以使用CSS的position:absolute屬性來把所有的圖片疊加起來，然后使用opacity屬性把所有的圖片都隱藏起來。此時所有圖片都重疊在一起，只顯示最上面的一張。我們還需要為每個圖片添加類名active，以便我們在之后的JavaScript代碼中通過操作類名來實現輪播效果。

最后我們需要通過JavaScript來控制圖片的輪播。具體實現方法可以參考下面的JavaScript代碼：

var index = 0;
var slider = document.querySelector('.slider');
var images = slider.querySelectorAll('img');
var total = images.length;
function showImage() {
for (var i = 0; i < total; i++) {
images[i].classList.remove('active');
}
images[index].classList.add('active');
}
function nextImage() {
index++;
if (index >= total) {
index = 0;
}
showImage();
}
slider.addEventListener('click', function() {
nextImage();
});

我們首先通過querySelector獲取slider元素，并使用querySelectorAll獲取所有的圖片元素。我們在代碼中定義了三個函數：showImage用來顯示當前的圖片，nextImage用來顯示下一張圖片，最后一個函數用來綁定點擊事件，這樣用戶就可以通過點擊圖片來手動輪播了。

在nextImage函數中，我們使用index變量來記錄當前顯示的圖片的位置，并在showImage函數中把所有圖片的類名active都去掉，然后再把index位置對應的圖片添加類名active，這樣就實現了手動輪播的效果。

當然還有很多其他的方式來實現手動輪播功能，有興趣的讀者可以自行嘗試。在實現輪播效果時還需要注意一些細節，例如如何處理圖片的切換延時等等。