HTML - Web 幻燈片桌

Web 幻燈片組介紹

你好，有志於網頁開發的各位！今天，我們將踏上一段令人興奮的旅程，進入 HTML 的世界，並創建我們自己的網頁幻燈片組。作為你們親切友善的鄰居計算機老師，我非常高興能夠引導你們走過這個過程，即使你們之前從未寫過一行代碼。所以，請繫好安全帶，我們一起來投入這個旅程吧！

HTML - Web slide Desk

Web 幻燈片組是什麼？

在我們開始編碼之前，讓我們先了解我們要創建的東西。一個網頁幻燈片組基本上就是一個在網頁瀏覽器中運行的演示文稿。它就像 PowerPoint 一樣，但更酷，因為你是用 HTML 從頭開始創建的！這意味著只要你有網絡連接，你就可以在任何地方、任何時間訪問它。

設置我們的 HTML 文件

讓我們從我們 HTML 文件的基礎結構開始。別擔心這個看起來會讓人感到害怕 - 我們會一步步分解它。

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的超棒網頁幻燈片組</title>
<style>
/* 我們稍後會在這裡添加一些 CSS */
</style>
</head>
<body>
<!-- 我們的幻燈片將放在這裡 -->
</body>
</html>

讓我們分解這個：

<!DOCTYPE html> 告訴瀏覽器這是一個 HTML5 文件。
<html lang="zh-tw"> 是我們 HTML 頁面的根元素，"zh-tw" 指定繁體中文語言。
<head> 部分包含關於文件的元信息。
<meta charset="UTF-8"> 指定文件的字符編碼。
<meta name="viewport"...> 確保在移動設備上正確渲染。
<title> 設置我們網頁的標題。
<style> 標籤是我們稍後將添加 CSS 的地方。
<body> 是我們幻燈片組可見內容將要放置的地方。

創建我們的第一個幻燈片

現在，讓我們創建我們的第一個幻燈片。我們將使用 <section> 標籤來定義每個幻燈片。

<body>
<div class="slideshow-container">
<section class="slide">
<h1>歡迎來到我的網頁幻燈片組！</h1>
<p>由 [你的名字] 創建</p>
</section>
</div>
</body>

在這裡，我們：

添加了一個帶有類 "slideshow-container" 的 <div> 來包含我們所有的幻燈片。
創建了一個帶有類 "slide" 的 <section> 作為我們的第一個幻燈片。
在我們的幻燈片中添加了一個標題 <h1> 和一個段落 <p>。

添加更多幻燈片

讓我們在我們的組中添加幾個幻燈片：

<div class="slideshow-container">
<section class="slide">
<h1>歡迎來到我的網頁幻燈片組！</h1>
<p>由 [你的名字] 創建</p>
</section>

<section class="slide">
<h2>我們將會涵蓋什麼內容</h2>
<ul>
<li>HTML 基礎</li>
<li>CSS 樣式</li>
<li>簡單的 JavaScript</li>
</ul>
</section>

<section class="slide">
<h2>謝謝你！</h2>
<p>有什麼問題嗎？</p>
</section>
</div>

我們添加了兩個更多的幻燈片，每個都有不同的內容結構。第二個幻燈片使用無序列表 <ul> 來顯示项目符號。

為我們的幻燈片添加 CSS 樣式

現在，讓我們為我們的幻燈片添加一些樣式。我們將這些樣式放在 <head> 部分的 <style> 標籤中：

<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Arial', sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

讓我們分解這個 CSS：

我們將 body 和 html 設置為全高並移除默認邊距。
.slideshow-container 使用 flexbox 佈局和 scroll-snap-type 实现平滑滑动。
每個 .slide 設置為全宽和高，並且內容居中。
我們使用 scroll-snap-align 確保幻燈片在滑動時能夠對齊。
為每個幻燈片使用 :nth-child 设置不同的背景颜色。

添加導航按鈕

為了讓我們的幻燈片組更加用戶友好，讓我們添加一些導航按鈕：

<body>
<div class="slideshow-container">
<!-- ... 幻燈片內容 ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ 上一个</button>
<button class="next" onclick="changeSlide(1)">下一个 ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

我們添加了：

"上一个" 和 "下一个" 按鈕，並且有 onclick 事件。
一個 changeSlide 函數在 JavaScript 中來處理導航。

讓我們為這些按鈕添加樣式：

<style>
/* ... 之前的樣式 ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

最後的觸碰

為了我們的導航能夠平滑工作，我們需要在幻燈片中添加 IDs：

<section id="slide1" class="slide">
<h1>歡迎來到我的網頁幻燈片組！</h1>
<p>由 [你的名字] 創建</p>
</section>

<section id="slide2" class="slide">
<h2>我們將會涵蓋什麼內容</h2>
<ul>
<li>HTML 基礎</li>
<li>CSS 樣式</li>
<li>簡單的 JavaScript</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>謝謝你！</h2>
<p>有什麼問題嗎？</p>
</section>

結論

恭喜你們！你們剛剛使用 HTML、CSS 和一點 JavaScript 創建了自己的網頁幻燈片組。這只是個開始 - 現在你們可以嘗試不同的樣式，添加更多的交互元素，甚至加入動畫。

記住，網頁開發是關於實踐和創造力的。不要害怕調整代碼並看看會發生什麼。誰知道呢？你們可能會發現一些令人驚奇的事情！

未來的網頁魔法師們，快樂編程！

方法表格

方法	描述
`document.querySelectorAll()`	選擇所有與 CSS 選擇器匹配的元素
`document.querySelector()`	選擇第一個與 CSS 選擇器匹配的元素
`Array.from()`	從類陣列對象創建新的 Array 實例
`indexOf()`	返回在陣列中可以找到給定元素的第一次出現的索引
`location.hash`	獲取/設定 URL 中跟隨 # 符號的部分

Credits: Image by storyset