如何使用HTML和CSS創建演示幻燈片

厭倦了學習新演示軟件？ 利用您現有的網絡開發技能！本教程向您展示瞭如何使用HTML，CSS和JavaScript（您已經知道的核心Web技術）構建令人驚嘆的交互式演示文稿。我們將使用現代HTML5構建幻燈片，並使用CSS造型，並使用JavaScript添加動態效果。

>該初學者友好的指南非常適合通過實用項目構建您的HTML5，CSS和JavaScript技能。 您甚至可以創建動態的HTML5幻燈片甲板或JavaScript供電的PPT替代品！

以下是最終演示文稿的預覽：

準備開始了嗎？讓我們潛入。

1。項目設置

首先，使用以下文件創建一個簡單的項目目錄：>

• index.html
• css/style.css
• js/scripts.js
這些文件最初將是空的。

>

2。基本HTML結構（

）index.html> >將以下代碼添加到您的

文件中。這包括字體很棒的圖標（用於樣式），您的樣式表和JavaScript文件。 帶有

班級的index.html<div>將保持我們的演示文稿。 <code>container>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Presentation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div class="container">
    <div id="presentation-area"></div>
</div>

稍後，使用JavaScript添加實際的幻燈片內容。 presentation-area類（在CSS中定義）將控制哪個幻燈片可見。 .show>

3。使用CSS（）style.css>

CSS將處理視覺呈現和幻燈片轉換。 我們將使用

類來管理屏幕方向（全屏為0，1對於較小的屏幕）。 screenStatus（初始化為0）將跟踪幻燈片的數量。 （注意：完整的CSS和JavaScript代碼太廣泛而無法包含在此處，但下面的摘要說明了關鍵功能。請參閱原始代碼。）totalSlides>

4。 JavaScript功能（）scripts.js

JavaScript將處理滑動導航和全屏模式。 關鍵功能包括：

• moveToLeftSlide()和moveToRightSlide()：這些函數通過刪除和添加.show>類來管理幻燈片過渡。
>
• fullScreenMode()和smallScreenMode()：這些切換全屏幕模式。
>
• hideLeftButton()和hideRightButton()：在第一個或最後一個幻燈片上，這些隱藏導航按鈕。
• getCurrentSlideNo()：更新當前幻燈片。
• setSlideNo()：顯示當前的幻燈片。
• init()：初始化變量並設置事件偵聽器。 每個幻燈片過渡後都調用此功能。

這種方法使用JavaScript動態管理幻燈片可見性，提供了一種創建交互式演示文稿的干淨有效的方法。 請記住要在原始功能上包含完整的CSS和JavaScript代碼以進行功能齊全的演示文稿。

>本教程為建立更複雜且具有視覺吸引力的HTML演示文稿提供了基礎。 通過添加動畫，過渡和更高級的JavaScript功能來進一步探索以增強幻燈片甲板。