CSS圖片輪播一直是前端開發中一個重要而常見的功能，而利用onclick事件來實現圖片輪播就更為簡單，本文將介紹如何使用CSS和JavaScript來實現點擊圖片進行輪播的效果。

首先，我們需要先創建一個包含圖片和按鈕的HTML結構，可以使用div標簽，如下：

<div class="slider">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<button onclick="prevSlide()" class="prev">Prev</button>
<button onclick="nextSlide()" class="next">Next</button>
</div>

接下來，我們需要使用CSS來對輪播進行樣式設計，可以設置每一個img標簽為絕對定位，使得圖片具有重疊效果。同時，我們還需要控制輪播圖的寬高、按鈕的位置以及按鈕的樣式等，如下：

.slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .5s ease-in-out;
}
.slider .prev,
.slider .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background-color: rgba(0, 0, 0, .3);
color: #fff;
font-size: 20px;
cursor: pointer;
}
.slider .prev {
left: 10px;
}
.slider .next {
right: 10px;
}

最后，我們使用JavaScript來控制輪播的效果。我們需要使用一個計數器變量來記錄當前顯示的圖片，以及實現按鈕點擊事件來切換圖片，如下：

var slideIndex = 1;
showSlides(slideIndex);
function prevSlide() {
showSlides(slideIndex -= 1);
}
function nextSlide() {
showSlides(slideIndex += 1);
}
function showSlides(n) {
var slides = document.querySelectorAll('.slider img');
if (n >slides.length) {
slideIndex = 1;
}
if (n< 1) {
slideIndex = slides.length;
}
for (var i = 0; i< slides.length; i++) {
slides[i].style.opacity = 0;
}
slides[slideIndex - 1].style.opacity = 1;
}

通過以上的CSS和JavaScript代碼，我們就可以實現點擊圖片進行輪播的效果了。當點擊“Prev”或“Next”按鈕時，會分別調用prevSlide和nextSlide函數來控制圖片的切換。