CSS3技術(shù)已經(jīng)成為前端開發(fā)者的必修技能之一，其中之一應(yīng)用非常廣泛的效果就是輪播圖片。下面我們來看一下如何用CSS3實現(xiàn)輪播圖片的效果。

/* HTML代碼 */
<div class="slider">
<img src="image1.jpg" alt="image 1">
<img src="image2.jpg" alt="image 2">
<img src="image3.jpg" alt="image 3">
</div>
/* CSS代碼 */
.slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}
.slider img.active {
opacity: 1;
}
/* JS代碼 */
var sliderImages = document.querySelectorAll('.slider img');
var currentImageIndex = 0;
var nextImageIndex = 1;
function startSlideshow() {
setInterval(function() {
sliderImages[currentImageIndex].classList.remove('active');
sliderImages[nextImageIndex].classList.add('active');
currentImageIndex = nextImageIndex;
nextImageIndex = (nextImageIndex + 1) % sliderImages.length;
}, 3000);
}
startSlideshow();

通過CSS3的transition屬性，我們可以讓圖片在切換時具有漸變效果。在JS代碼中，我們使用了setInterval函數(shù)來循環(huán)播放圖片。每次循環(huán)播放時，我們都將當(dāng)前顯示的圖片的active類刪除，并給下一張圖片添加active類。

有了這個簡單的輪播圖片代碼，我們就可以為網(wǎng)站添加一個精美的輪播圖片效果。