在網(wǎng)頁制作中，幻燈片是常見的效果之一，通過圖片或文字的滑動或漸變，可以給用戶帶來視覺上的享受。本文將介紹如何使用div加上CSS樣式實現(xiàn)幻燈片效果。

HTML代碼：
<div class="slider">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
CSS代碼：
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: -300px;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
.slider img.active {
top: 0;
opacity: 1;
}
JavaScript代碼：
var slider = document.querySelector('.slider');
var imgs = document.querySelectorAll('.slider img');
var len = imgs.length;
var index = 0;
function slide() {
imgs[index].classList.remove('active');
index = (index + 1) % len;
imgs[index].classList.add('active');
}
setInterval(slide, 3000);

首先，在HTML中使用div標(biāo)簽來包裹圖片，給div添加一個class屬性。在CSS中，給div設(shè)置寬高、位置和overflow:hidden屬性，以保證圖片不會溢出。對圖片設(shè)置position:absolute，top:-300px和opacity:0屬性，以讓圖片向上滑動并且不可見。同時，對圖片使用transition屬性，使圖片的移動過程更加平滑。最后，給幻燈片中的第一張圖片添加active類名，以讓初始狀態(tài)下，用戶可以看到第一張圖片。

在JavaScript中，定義一個計數(shù)器index，用于記錄當(dāng)前顯示的圖片。通過setInterval函數(shù)，每隔3秒鐘自動執(zhí)行一次slide函數(shù)。slide函數(shù)中，先移除當(dāng)前顯示圖片的active類名，再將index增加1，然后對下一張圖片添加active類名。由于index是通過取余實現(xiàn)循環(huán)，所以當(dāng)index增加到最后一張圖片時，下一張圖片又是第一張圖片。

如此一來，通過div加上CSS樣式和JavaScript控制，就能輕松實現(xiàn)幻燈片效果。