CSS3是網(wǎng)頁設(shè)計(jì)中一個(gè)非常強(qiáng)大的工具，它可以讓我們實(shí)現(xiàn)很多想象中的效果。其中，讓圖片輪播也是非常常見和實(shí)用的一個(gè)功能。下面我們就來介紹一下如何用CSS3來實(shí)現(xiàn)圖片輪播效果。

HTML結(jié)構(gòu)：
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img4.jpg">
</div>
CSS樣式：
.slider {
width: 600px;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slider img {
position: absolute;
top: 0;
width: 600px;
height: 400px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.slider img:first-of-type {
opacity: 1;
}
.slider:hover img {
opacity: 0.5;
}
.slider:hover img.active {
opacity: 1;
}
Javascript代碼：
var i = 0;
var slider = document.querySelector('.slider');
var images = document.querySelectorAll('.slider img');
setInterval(function() {
i++;
if (i >images.length - 1) {
i = 0;
}
images[i].classList.add('active');
for (var j = 0; j< images.length; j++) {
if (j !== i) {
images[j].classList.remove('active');
}
}
}, 5000);

代碼中，HTML結(jié)構(gòu)主要包括一個(gè)包含了四張圖片的容器div.slider，以及四張圖片。在CSS樣式中，我們?cè)O(shè)置了div.slider的寬高和位置，以及圖片的絕對(duì)定位和過渡效果。其中，我們?cè)O(shè)置了第一張圖片為默認(rèn)顯示的狀態(tài)。在JavaScript代碼中，我們使用setInterval函數(shù)來實(shí)現(xiàn)每隔一段時(shí)間（這里是5秒）切換一張圖片的效果，通過改變圖片的類名來顯示或隱藏相應(yīng)的圖片。