輪播圖是網站中常見的一種展示方式，它能夠讓頁面的信息更加清晰明了。而手動切換輪播圖則是讓用戶能夠控制輪播圖的滾動速度，提升了用戶體驗。

那么如何實現輪播圖的手動切換呢？下面就用簡單的html和css代碼進行演示。

<div class="slider">
<img src="picture1.jpg">
<img src="picture2.jpg">
<img src="picture3.jpg">
</div>
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
}
.slider img:first-child {
opacity: 1;
z-index: 2;
}

上述代碼是一個簡單的輪播圖，其中`.slider`是最外層的`div`標簽，`img`標簽則是用來顯示輪播圖中的圖片。`.slider`的`width`和`height`分別代表輪播圖的寬和高，`overflow: hidden`則是用來隱藏圖片的溢出部分，`position: relative`則是輪播圖的定位方式。

`.slider img`樣式則是用來控制輪播圖中每張圖片的樣式，在這里我們設置了圖片的寬和高，定位方式，以及透明度和層級關系。其中`opacity: 0`表示圖片初始時的透明度為0，`z-index: 1`則是用來控制圖片的層級，使圖片不重疊。

`slider img:first-child`則是用來控制第一張圖片的樣式，將其透明度設置為1，并將層級提高到2，使其在第一時間展示。而當用戶手動切換圖片時，我們只需要通過javascript來控制圖片的透明度和層級關系即可完成輪播圖的手動切換。

以上就是通過html和css實現輪播圖手動切換的方法。