純CSS寫的輪播圖是一種常用的網頁設計技術。這種技術可以幫助我們在網頁上實現一些動態的效果，比如滾動廣告、圖片展示、產品推薦等等。下面我們來介紹一下如何使用純CSS來實現一個簡單的輪播圖。

/* 輪播圖樣式 */
.slideshow{
position:relative;
width:100%;
height:300px;
overflow:hidden;
}
.slideshow img{
position:absolute;
top:0;
left:0;
opacity:0;
z-index:1;
transition: opacity 1s ease-in-out;
}
.slideshow img.active{
opacity:1;
z-index:2;
}
/* 輪播圖控制按鈕樣式 */
.slideshow-controls{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
}
.slideshow-controls button{
margin:0 8px;
border:none;
background-color:#fff;
cursor:pointer;
padding:8px;
border-radius:50%;
outline:none;
transition:background-color 0.5s ease-in-out;
}
.slideshow-controls button.active{
background-color:#000;
color:#fff;
}

以上代碼是輪播圖的樣式代碼，主要包括輪播圖的容器樣式、輪播圖圖片樣式以及控制按鈕樣式。其中，輪播圖圖片樣式設置了opacity屬性，用來實現圖片的淡入淡出效果；控制按鈕樣式使用了flex布局，將按鈕水平居中，并使用translateX(-50%)將其左移50%，實現居中效果。

接下來，我們需要使用JavaScript代碼來控制輪播圖的切換。

/* JavaScript代碼 */
const images = document.querySelectorAll('.slideshow img');
const controls = document.querySelectorAll('.slideshow-controls button');
let i = 0;
function changeImage() {
images[i].classList.remove('active');
controls[i].classList.remove('active');
i = (i + 1) % images.length;
images[i].classList.add('active');
controls[i].classList.add('active');
}
setInterval(changeImage, 3000);

以上代碼是輪播圖的JavaScript代碼，通過獲取輪播圖的圖片和控制按鈕元素，然后使用一個變量i來記錄當前圖片下標，不斷更改i的值，并設置對應的圖片和控制按鈕為active狀態，實現輪播效果。使用setInterval函數來每隔三秒切換圖片。

最終，我們就可以在網頁上實現一個簡單的純CSS輪播圖了。