CSS圖片自動翻頁是一種常見的網頁特效，通過CSS的動畫效果實現圖片的翻頁、切換等操作。下面，我們將介紹如何編寫一個簡單的CSS圖片自動翻頁代碼。

首先，我們需要準備一組圖片，通過HTML的標簽將這些圖片插入到頁面中。

<div class="slideshow">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>

接下來，我們需要使用CSS對這些圖片進行樣式設置，并且添加動畫效果。我們可以將圖片容器設置為position:relative，圖片設置為position:absolute，并且通過left屬性控制圖片的位置。

.slideshow {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slideshow img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 500px;
height: 300px;
transition: opacity 1s ease-in-out;
}
.slideshow img:first-child {
opacity: 1;
}

這里通過opacity屬性設置圖片的透明度，使用transition屬性設置動畫的過渡時間和過渡效果，讓圖片漸變出現或消失。

接下來，我們需要使用JS代碼實現自動翻頁的效果，這里我們采用定時器setInterval來實現圖片的自動切換。在JS代碼中，我們定義一個變量index來記錄當前顯示的圖片序號，當index變量達到了圖片的最大序號時，自動重置為0，繼續循環顯示圖片。

let index = 0;
const slides = document.querySelectorAll('.slideshow img');
setInterval(() =>{
slides[index].style.opacity = 0;
index++;
if(index === slides.length){
index = 0;
}
slides[index].style.opacity = 1;
}, 2000);

最終，我們實現了一個簡單的CSS圖片自動翻頁特效。用戶可以通過組合修改HTML、CSS和JS代碼的方式，實現多種不同的效果。