輪播圖片是網頁中很常見的一種效果，可以讓頁面更加生動有趣。而當我們想要實現輪播圖片每點擊切換一次的效果時，就需要了解一些關于css的知識。

html:
css:
.carousel {
position: relative;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: opacity 0.5s;
}
.carousel img:first-child {
opacity: 1;
}
.js:
var carousel = document.querySelector(".carousel");
var images = document.querySelectorAll(".carousel img");
var currentIndex = 0;
carousel.addEventListener("click", function() {
//隱藏當前圖片
images[currentIndex].style.opacity = 0;
//計算下一張圖片的位置
currentIndex = (currentIndex + 1) % images.length;
//顯示下一張圖片
images[currentIndex].style.opacity = 1;
});

以上便是實現輪播圖片每點擊一次切換的代碼示例。我們首先通過css的絕對定位和透明度來實現圖片的輪播效果，然后通過javascript來計算圖片的位置并實現點擊后的切換效果。