CSS自動播放的輪播圖是網頁設計中一個常用的交互元素，可以幫助網站的用戶更方便、快捷地了解到網站的主要信息，提高用戶體驗。下面我們來一起學習一下CSS自動播放的輪播圖的制作方法。

HTML結構代碼：
<div class="slider">
<img src="image1.jpg" alt="圖片1">
<img src="image2.jpg" alt="圖片2">
<img src="image3.jpg" alt="圖片3">
<img src="image4.jpg" alt="圖片4">
</div>
CSS樣式代碼：
.slider {
position: relative;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .6s;
}
.slider img:first-child {
opacity: 1;
}
Javascript代碼：
var slider = document.querySelector('.slider');
var images = slider.querySelectorAll('img');
var index = 0;
window.setInterval(function() {
images[index].style.opacity = 0;
index = (index + 1) % images.length;
images[index].style.opacity = 1;
}, 5000);

首先，在HTML中使用<div class="slider">包含所有的輪播圖元素，然后在CSS中設置slider的高度和overflow屬性隱藏原始圖片，然后利用CSS的transition屬性控制圖片的淡入淡出效果。在Javascript中，則使用setInterval方法來實現圖片自動播放的效果。在每個interval的周期內，當前圖片的opacity變為0，然后輪播到下一張圖片，并將該圖片的opacity變為1。