在網(wǎng)站設(shè)計中，輪播圖是一個非常常見的元素，可以讓界面更加生動有趣、吸引用戶的眼球。而CSS上下輪播圖，則是一個垂直方向的輪播圖，下面我們就來說說如何制作CSS上下輪播圖。

首先，我們需要一個HTML的結(jié)構(gòu)，這里以3個圖片為例：

<div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

接下來，我們需要使用CSS來設(shè)置輪播圖的樣式。首先，將輪播圖的區(qū)域設(shè)為相對定位，以便輪播圖片的絕對定位。然后，將圖片全部絕對定位，讓它們疊在一起。

.carousel {
position: relative;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}

上面的代碼還設(shè)置了圖片的初始透明度為0，即不可見。接下來，我們需要設(shè)置圖片的動畫效果，讓它們逐一顯示出來。

.carousel img:first-of-type {
opacity: 1;
}
.carousel .showing {
opacity: 1;
}

在上面的代碼中，我們設(shè)置了第一張圖片的透明度為1，即一開始就可見。然后，當(dāng)圖片具有showing類時，將其透明度設(shè)為1，實現(xiàn)圖片的逐一顯示。

接下來，我們需要用Javascript實現(xiàn)圖片的自動輪播。這里我們使用setInterval()函數(shù)來觸發(fā)輪播。

var slideIndex = 0;
var slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
var slides = document.querySelectorAll('.carousel img');
slides[slideIndex].classList.remove('showing');
slideIndex = (slideIndex + 1) % slides.length;
slides[slideIndex].classList.add('showing');
}

在上面的代碼中，我們設(shè)置了slideIndex變量來追蹤當(dāng)前顯示的圖片。然后，使用setInterval()函數(shù)來每隔3秒鐘調(diào)用一次nextSlide()函數(shù)，實現(xiàn)自動輪播。在nextSlide()函數(shù)中，我們首先將上一張圖片的showing類去掉，然后將slideIndex設(shè)為下一張圖片的下標(biāo)，最后將下一張圖片的showing類加上，實現(xiàn)輪播效果。

到這里，我們就完成了CSS上下輪播圖的制作。當(dāng)然，還可以根據(jù)實際需求對樣式和功能進(jìn)行調(diào)整，比如增加滑動控制、移動端適配等等。希望能對你有所幫助！