CSS3是一種用于渲染網頁的樣式表語言，它為我們提供了許多新的特性，包括制作圖片輪播所需的動畫效果。

以下是使用CSS3制作圖片輪播的步驟：

// CSS樣式
.slider {
width: 60%; /* 設定輪播圖的寬度 */
height: 300px; /* 設定輪播圖的高度 */
margin: 0 auto; /* 居中顯示 */
position: relative; /* 相對定位，為輪播圖內的元素設定坐標做準備 */
overflow: hidden; /* 超出部分隱藏 */
}
.slider img {
/* 設定圖片的寬度為100%以適應輪播圖的大小 */
width: 100%;
height: 100%;
position: absolute; /* 絕對定位，為制作動畫效果做準備 */
top: 0; /* 圖片的初始化位置是緊貼著輪播圖的上邊緣 */
left: 0; /* 圖片的初始化位置是緊貼著輪播圖的左邊緣 */
opacity: 0; /* 圖片的初始化透明度為0 */
transition: opacity 1s ease; /* 指定圖片的透明度變化持續時間和動畫方式 */
}
.slider img.active {
opacity: 1; /* 當前圖片的透明度變為1，顯示在輪播圖中 */
}
@media (max-width: 768px) {
/* 當視口寬度小于等于768px時，調整輪播圖的寬度與高度等比例縮小 */
.slider {
width: 100%;
height: 220px;
}
}
// JavaScript代碼
setInterval(() =>{
const idx = Math.floor(Math.random() * 3); /* 隨機抽取一張圖片 */
const sliderEl = document.querySelector('.slider'); /* 獲取輪播圖的元素 */
const imgEls = sliderEl.querySelectorAll('img'); /* 獲取輪播圖內的img元素 */
for (let i = 0; i< imgEls.length; i++) {
const imgEl = imgEls[i];
if (i === idx) {
imgEl.classList.add('active'); /* 將抽取到的圖片設為當前圖片 */
} else {
imgEl.classList.remove('active'); /* 將非當前圖片的透明度設為0 */
}
}
}, 3000); /* 每隔3秒鐘自動切換一張圖片 */

以上這份代碼可以讓我們實現一個自動切換、多張圖片的輪播圖。其中，CSS樣式中我們設定了輪播圖的基本樣式和圖片的基本樣式，圖片類img.active標記了當前顯示的圖片，通過CSS的opacity屬性實現了圖片的淡入淡出動畫效果。JavaScript中我們使用了setInterval函數自動切換輪播圖內的圖片，每次隨機抽取一張圖片并將其標記為當前圖片。隨后通過遍歷所有圖片元素，將除當前顯示圖片之外的其他圖片元素的透明度設為0，從而實現了自動切換并且可以展示多張圖片的輪播圖。