幻燈片是一種常用的展示內容的方式，它可以讓信息更加直觀、生動。在網頁中使用幻燈片需要運用到JavaScript和CSS技術，下面將介紹幻燈片的簡單使用。

首先，我們需要定義幻燈片的HTML結構。一般來說，幻燈片通常定義成一個容器，里面包含多個子元素。我們可以使用<div>標簽來定義這個容器，例：

<div id="slider">
<div></div>
<div></div>
<div></div>
</div>

以上代碼定義了一個id為“slider”的<div>元素，里面包含了三個<div>元素作為子元素。接下來，我們需要用CSS來定義這些子元素的樣式，用JavaScript來實現這些子元素的切換。

在CSS中，我們可以使用絕對定位來控制子元素的位置和顯示方式。以下是一個例子：

#slider {
position: relative;
height: 300px; /* 此處的高度可以根據實際情況修改 */
}
#slider div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}

以上代碼實現了幻燈片的基本樣式，每個子元素的位置都為絕對定位，寬高都為100%，并且初始狀態是不顯示的（display:none）。接下來，我們需要用JavaScript來實現幻燈片的自動播放和手動切換。

var slider = document.getElementById('slider');
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = slider.getElementsByTagName('div');
for (var i = 0; i< slides.length; i++) {
slides[i].style.display = 'none';
}
slideIndex++;
if (slideIndex >slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = 'block';
setTimeout(showSlides, 3000); /* 此處3000表示3秒自動播放一次，可根據需求修改 */
}

以上代碼實現了幻燈片的自動播放。定義了一個showSlides函數，用于控制子元素的顯示和隱藏。在定時器中不斷調用showSlides函數，實現幻燈片的自動播放。接下來，我們可以通過添加按鈕來實現手動切換。

通過以上代碼的介紹，我們可以了解到使用JavaScript和CSS來實現幻燈片非常簡單。在實際應用中，還有很多細節需要注意，需要根據文檔研究和實踐操作，逐漸提高幻燈片使用的技巧和效果。