CSS是一種很有用的前端技術，不僅可以美化網頁的樣式，還可以用來制作圖片輪播。圖片輪播可以讓網頁更加生動和吸引人，為用戶提供更好的視覺效果和用戶體驗。

/* css代碼 */
.slideshow {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
.slideshow img {
flex: 1 0 100%;
height: 100%;
object-fit: cover;
}
.slider {
display: flex;
width: calc(100% * 3);
height: 100%;
transition: transform 0.5s ease;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 28px;
cursor: pointer;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
/* js代碼 */
var slider = document.querySelector('.slider');
var btnPrev = document.querySelector('.prev');
var btnNext = document.querySelector('.next');
var slideWidth = document.querySelector('.slideshow').offsetWidth;
var slideCount = slider.children.length;
var currentIndex = 0;
slider.style.transform = "translateX(-" + currentIndex * slideWidth + "px)";
btnPrev.addEventListener('click', function() {
currentIndex--;
if (currentIndex< 0) {
currentIndex = slideCount - 1;
}
slider.style.transform = "translateX(-" + currentIndex * slideWidth + "px)";
});
btnNext.addEventListener('click', function() {
currentIndex++;
if (currentIndex >slideCount - 1) {
currentIndex = 0;
}
slider.style.transform = "translateX(-" + currentIndex * slideWidth + "px)";
});

使用上述的CSS和JavaScript代碼可以制作一個簡單的圖片輪播。其中，CSS代碼中設置了圖片輪播的樣式，包括輪播容器的寬高、輪播圖片的布局和適應方式、輪播動畫過渡效果等。JavaScript代碼中則定義了輪播的基本邏輯，包括圖片輪播容器的位置計算和移動，以及點擊按鈕時的相應動作。

以上就是用CSS制作圖片輪播的方法和代碼了，希望對你有所幫助。