CSS3提供了許多實現(xiàn)圖片輪播的方法，以下介紹幾種常見的。

/* 1. 使用CSS3動畫 */
.carousel {
position: relative;
width: 800px;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.carousel img:first-child {
opacity: 1;
}
@keyframes carousel {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.carousel img:last-child {
animation: carousel 5s infinite;
}

以上代碼使用CSS3動畫輪播圖片，通過設(shè)置第一張圖片的opacity為1，設(shè)置最后一張圖片的animation為輪播動畫，達到輪播圖片的效果。

/* 2. 使用CSS3過渡 */
.carousel {
position: relative;
width: 800px;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.carousel img:first-child {
opacity: 1;
}
.carousel img:target {
opacity: 1;
}
.carousel a {
	dispaly: none;
}
.carousel a:nth-child(2):target ~ img:first-child {
	opacity: 0;
}
.carousel a:nth-child(3):target ~ img:first-child {
	opacity: 0;
}
.carousel a:nth-child(4):target ~ img:first-child {
	opacity: 0;
}
.carousel a:nth-child(5):target ~ img:first-child {
	opacity: 0;
}

以上代碼使用CSS3過渡輪播圖片，通過設(shè)置第一張圖片的opacity為1，設(shè)置每張圖片的target為當前圖片，達到輪播圖片的效果。

/* 3. 使用jQuery插件slick.js */
.carousel {
width: 800px;
height: 400px;
}
.carousel img {
width: 800px;
height: 400px;
}

以上代碼使用jQuery插件slick.js實現(xiàn)圖片輪播，只需將需要輪播的圖片包裹在.carousel標簽內(nèi)，然后在頁面引入slick.js即可。