CSS手動輪播廣告是一種常見的網頁廣告展示方式。這種廣告一般是通過CSS的動畫效果來實現圖片的自動輪播，而手動輪播則需要用戶點擊上一頁或下一頁按鈕來進行操作。

/* CSS代碼 */
.container {
position: relative;
width: 800px;
height: 400px;
overflow: hidden;
}
.image-list {
position: absolute;
width: 400%;
height: 100%;
left: 0;
top: 0;
animation: slide 10s infinite;
}
.image-item {
float: left;
width: 20%;
height: 100%;
}
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
@keyframes slide {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

在上述代碼中，通過使用position: absolute;實現了圖片輪播的效果。同時，通過animation關鍵字，實現了圖片自動輪播的動畫效果，并設置了循環播放。接下來，通過.prev和.next類分別實現了向前和向后翻頁的效果。

在這種手動輪播廣告中，我們需要利用JavaScript監聽用戶的點擊事件，并通過修改CSS的效果來達到翻頁的效果。下面是實現原理的JavaScript代碼：

/* JavaScript代碼 */
let currentIndex = 0;
let imageItems = document.querySelectorAll('.image-item');
document.querySelector('.prev').addEventListener('click', function() {
let prevIndex = currentIndex - 1;
if (prevIndex < 0) {
prevIndex = imageItems.length - 1;
}
currentIndex = prevIndex;
updateStyle();
});
document.querySelector('.next').addEventListener('click', function() {
let nextIndex = currentIndex + 1;
if (nextIndex >= imageItems.length) {
nextIndex = 0;
}
currentIndex = nextIndex;
updateStyle();
})
function updateStyle() {
let imageList = document.querySelector('.image-list');
let offset = -currentIndex * 100 / imageItems.length;
imageList.style.left = offset + '%';
}

在這段代碼中，我們首先通過querySelectorAll('.image-item')獲取到所有的圖片元素，然后通過監聽.prev和.next類的點擊事件來判斷用戶的翻頁操作。最后，我們通過updateStyle函數來實現更新CSS樣式的操作，可以看到，我們在這個函數中通過修改imageList.style.left這個屬性，來動態改變整體圖片列表的left屬性，從而達到輪播的效果。