單擊輪播圖是一種在網頁中常用的展示圖片或廣告的方式。在CSS中，我們可以使用一些技巧來實現這種效果。

/*HTML結構*/
/*CSS樣式*/
.slider{
position:relative;
overflow:hidden;
}
.slider img{
position:absolute;
top:0;
left:0;
opacity:0;
transition:opacity 0.5s;
}
.slider img.active{
opacity:1;
}
/*JavaScript代碼*/
var slider = document.querySelector('.slider');
var images = slider.querySelectorAll('img');
var index = 0;
images[0].classList.add('active');
slider.onclick = function(){
images[index].classList.remove('active');
index = (index+1)%images.length;
images[index].classList.add('active');
}

在上面的代碼中，首先使用CSS將輪播圖容器設置為相對定位，并隱藏超出容器范圍的圖片。然后通過絕對定位將每張圖片疊在一起，并設置不透明度為0，使得只有當前顯示的圖片不透明度為1。這樣，當我們點擊輪播圖容器時，JavaScript代碼會將當前顯示的圖片的不透明度設置為0，然后計算出下一張圖片的序號，并將其不透明度設置為1，從而實現了圖片的輪播效果。