CSS+圖片+輪播代碼

輪播圖已成為現(xiàn)代網(wǎng)站設(shè)計中常見的元素之一。下面是使用CSS+圖片實現(xiàn)一個簡單的輪播圖效果的代碼：

<!-- HTML結(jié)構(gòu) -->
<div class="slider">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
</div>
<!-- CSS樣式 -->
.slider{
width: 80%;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.slider img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s;
}
.slider img.active{
opacity: 1;
}
<!-- JavaScript代碼 -->
<script>
var imgs = document.querySelectorAll('.slider img');
var len = imgs.length;
var index = 0;
setInterval(function(){
imgs[index].classList.remove('active');
index = (index + 1) % len;
imgs[index].classList.add('active');
}, 3000);
</script>

其中，HTML結(jié)構(gòu)中的<div>元素包含了用于輪播的幾張圖片，CSS樣式中設(shè)置了輪播圖的寬高、大小及透明度等屬性，JavaScript代碼則為輪播效果的實現(xiàn)。其中，setInterval()方法為每隔3秒進行圖片的輪播，通過修改當(dāng)前輪播圖片的class來實現(xiàn)。