CSS網頁圖片輪播是現代網頁設計中常用的一種元素。通過設置CSS樣式，我們可以實現圖片輪播的效果，讓網站更加生動活潑。

/*首先需要設置圖片輪播的容器樣式*/
.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
margin-top: 50px;
}
/*設置圖片容器的樣式*/
.slider ul {
position: absolute;
left: 0;
top: 0;
width: 300%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
/*設置每一張圖片的樣式*/
.slider ul li {
float: left;
width: 33.333%;
height: 100%;
list-style: none;
}
/*定義每張圖片的樣式，用JavaScript實現圖片的自動輪播*/

以上是CSS樣式部分的代碼，接下來我們需要使用JavaScript代碼實現圖片的自動輪播。下面給出一個簡單的實現示例，大家可以根據自己的需求進行修改。

/*使用JavaScript實現圖片輪播*/
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slider ul li");
for (i = 0; i< x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex >x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000); // 2秒鐘更換圖片
}

以上是使用JavaScript實現自動輪播的代碼，通過設置一個定時函數，每隔2秒鐘更換一張圖片。同時使用CSS樣式實現圖片容器的設置，以及每一張圖片的樣式。這樣就可以實現一個簡單的CSS網頁圖片輪播效果。