<div class="slider"> 
<button class="up-btn">∧</button> 
<img src="image-file" alt="..."> 
<button class="down-btn">∨</button> 
</div>

然后，給父元素和子元素設置CSS樣式：

.slider {
position: relative; /*設定相對定位*/
width: 200px;
height: 200px;
}
.up-btn,
.down-btn {
position: absolute; /*設定絕對定位*/
top: 0; /*設置在頂部*/
width: 100%;
height: 50%;
border: none;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 24px;
cursor: pointer; /*設置光標樣式為手型*/
}
.up-btn {
left: 0; /*設定距左側為0*/
border-radius: 10px 10px 0 0; /*設定上角為圓角*/
}
.down-btn {
left: 0; /*設定距左側為0*/
top: 50%; /*設定在下半部分*/
border-radius: 0 0 10px 10px; /*設定下角為圓角*/
}
.slider img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

通過設置按鈕的樣式，我們可以使其覆蓋子圖像的前一半。緊接著，我們需要添加JavaScript代碼來進行循環轉換，使得按鈕可以按照上下順序來滾動。下面是JavaScript代碼：

const upBtn = document.querySelector('.up-btn');
const downBtn = document.querySelector('.down-btn');
const slider = document.querySelector('.slider');
const img = document.querySelector('img');
let counter = 0;
downBtn.addEventListener('click', () => {
counter += 100;
slider.style.transform = `translateY(-${counter}%)`;
checkCounter();
});
upBtn.addEventListener('click', () => {
counter -= 100;
slider.style.transform = `translateY(-${counter}%)`;
checkCounter();
});
function checkCounter() {
if (counter === 0) {
upBtn.disabled = true;
} else if (counter === 200) {
downBtn.disabled = true;
} else {
upBtn.disabled = false;
downBtn.disabled = false;
}
}

最后，我們需要設定一個事件監聽器來檢測計數器的值，以此來判斷是否達到了最大或最小值。

通過以上步驟，我們就可以創建一個基本的CSS上下按鈕循環圖，用來增加網頁的交互感和視覺效果。