使用 JavaScript 框架创建演示文稿

18 Mar 2025 | 8 分钟阅读

在本文中，我们将了解如何使用 JavaScript 创建演示文稿。演示文稿用于传达信息。它将您的 HTML 内容分成多个幻灯片，以便访问者能够通过鼠标滚轮、箭头键、触摸事件等特定操作在这些幻灯片之间导航。

示例 1

<! DOCTYPE html>
<html>                                            
    <head>              
        <meta http-equiv = "Content-Type"   
            content = "text/html; charset=UTF-8" />   
        <title> Example of  Create Presentation using JavaScript  </title>   
        <meta name = "description"/>   
        <meta content = "width=800, initial-scale=1"   
        name = "viewport" />    
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  transition: all 0.5s ease;
  text-align: center;
}
body {
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
    box-sizing: border-box;
    padding: 10;
    margin: 10;
    overflow-x: hidden;
    font-family: "Poppins", sans-serif;
    background-color: rgb(238, 238, 238);
}
ul {
  margin-left: 2rem;
}
ul li,
a {
  font-size: 1.2em;
}
.container {
  background: #212121;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  text-align: center;
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  text-align: center;
}
html {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
* {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -box-sizing: border-box;
}
#present-area {
  width: 1000px;
  height: 500px;
  position: relative;
  background: purple;
}
#present-area .present {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}
#present-area .counter {
  position: absolute;
  bottom: -30px;
  left: 0;
  color: #b6b6b6;
}
#present-area .nav {
  position: absolute;
  bottom: -45px;
  right: 0;
}
#present-area .full-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#present-area .full-screen .counter {
  bottom: 15px;
  left: 15px;
}
#present-area .full-screen .nav {
  bottom: 15px;
  right: 15px;
}
#present-area .full-screen .nav .btn:hover {
  background: #201e1e;
  color: #ffffff;
}
#present-area .full-screen .nav .btn-screen:hover {
  background: #201e1e;
}
.nav button {
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  margin-left: 0.5rem;
  font-size: 1.5rem;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.nav .btn {
  background: #464646;
  color: #ffffff;
  border-radius: 0.25rem;
  opacity: 0;
  transform: scale(0);
}
.nav .btn.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.nav .btn-screen {
  background: transparent;
  color: #b6b6b6;
  visibility: hidden;
}
.btn-screen.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.btn-screen.hover {
  color: #ffffff;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.present .content {
  padding: 2em;
  width: 100%;
  height: calc(100% - 100px);
  z-index: 11;
}
.present .content.grid {
  display: grid;
}
.present .content.grid.center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.content .title {
  font-size: 3em;
  color: #cb5dcb;
}
.content .sub-title {
  font-size: 2.5em;
  color: purple;
}
.content p {
  font-size: 1.25em;
  margin-bottom: 1rem;
}
.present .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  visibility: none;
}
.slide.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.slide .heading {
  padding: 2rem;
  background: #a786a7;
  font-size: 2em;
  font-weight: bold;
  color: #2e0202;
}
</style>
<body>
<h1> Example </h1>
<h2> Create Presentation Using JavaScript </h2>
<div class="container">
  <div id="present-area ">
    <section class="present">
      <div class="slide show">
        <div class="heading">
          Present on C
        </div>
        <div class="content grid center">
          <h3 class="title">
            What is C ? <br />
          </h3>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Overview
        </div>
        <div class="content grid center">
          <h3 class="title">
            Introduction to C
          </h3>
          <p class="sub-title">
            Basic and Advanced Concepts
          </p>
          <p>Lecture No. 1</p>
          <p>My Email Address</p>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          History
        </div>
        <div class="content">
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Calling a Function
        </div>
        <div class="content">
          <p>A function is a group of statements that together perform a task. Every C program has at least one function, which is main(), and all the most trivial programs can define additional functions. You can divide up your code into separate functions.</p>
          <ul>
            <li>Call by values</li>
            <li>Call by reference</li>
          </ul>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Array Initialization
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Objects
        </div>
      </div>
    </section>
    <section class="counter">
      1 of 5
    </section>
    <section class="nav">
      <button id="full-screen" class="btn-screen show">
        <i class="fas fa-expand"></i>
      </button>
      <button id="small-screen" class="btn-screen">
        <i class="fas fa-compress"></i>
      </button>
      <button id="left-btn" class="btn">
        <i class="fas fa-solid fa-caret-left"></i>
      </button>
      <button id="right-btn" class="btn">
        <i class="fa-solid fa-caret-right"></i>
      </button>
    </section>
  </div>
</div>
<script>
let present = document.querySelector(".present");
let slides = document.querySelectorAll(".slide");
let currentSlide = document.querySelector(".slide.show");
var slideNumber = document.querySelector(".counter");
var toLeftBtn = document.querySelector("#left-btn");
var toRightBtn = document.querySelector("#right-btn");
let presentController = document.querySelector("#present-area ");
var toFullScreenBtn = document.querySelector("#full-screen");
var toSmallScreenBtn = document.querySelector("#small-screen");
var screenStatus = 0;
var currentSlideNo = 1;
var totalSides = 0;
init();
function init() {
  getCurrentSlideNo();
  totalSides = slides.length;
  setSlideNo();
  hideLeftButton();
  hideRightButton();
}
toLeftBtn.addEventListener("click", moveToLeftSlide);
toRightBtn.addEventListener("click", moveToRightSlide);
toFullScreenBtn.addEventListener("click", fullScreenMode);
toSmallScreenBtn.addEventListener("click", smallScreenMode);
function hideLeftButton() {
  if (currentSlideNo == 1) {
    toLeftBtn.classList.remove("show");
  } else {
    toLeftBtn.classList.add("show");
  }
}
function hideRightButton() {
  if (currentSlideNo === totalSides) {
    toRightBtn.classList.remove("show");
  } else {
    toRightBtn.classList.add("show");
  }
}
function moveToLeftSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.previousElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function moveToRightSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.nextElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function getCurrentSlideNo() {
  let counter = 0;
  slides.forEach((slide, i) => {
    counter++;
    if (slide.classList.contains("show")) {
      currentSlideNo = counter;
    }
  });
}
function fullScreenMode() {
  presentController.classList.add("full-screen");
  toFullScreenBtn.classList.remove("show");
  toSmallScreenBtn.classList.add("show");
  screenStatus = 1;
}
function smallScreenMode() {
  presentController.classList.remove("full-screen");
  toFullScreenBtn.classList.add("show");
  toSmallScreenBtn.classList.remove("show");
  screenStatus = 0;
}
function setSlideNo() {
  slideNumber.innerText = `${currentSlideNo} of ${totalSides}`;
}
</script>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 内容创建了一个演示幻灯片示例。

输出

以下是这个例子的输出。

Create Presentation using JavaScript Framework

示例 2

<! DOCTYPE html>
<html>                                            
    <head>              
        <meta http-equiv = "Content-Type"   
            content = "text/html; charset=UTF-8" />   
        <title> Example of  Create Presentation using JavaScript  </title>   
        <meta name = "description"/>   
        <meta content = "width=800, initial-scale=1"   
        name = "viewport" />    
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  font-family: 'Arimo', sans-serif;
  font-size: 3vw;
  color: black;
}
h2 {
  text-align: center;
  color: green;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  text-align: center;
   font-family: 'Arvo', serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  transition: all 0.5s ease;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  margin-left: 2rem;
}
ul li,
a {
  font-size: 1.2em;
}
.container {
  background: #212121;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#present-area {
  width: 1000px;
  height: 500px;
  position: relative;
  background: purple;
}
#present-area .present {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}
#present-area .counter {
  position: absolute;
  bottom: -30px;
  left: 0;
  color: #b6b6b6;
}
#present-area .nav {
  position: absolute;
  bottom: -45px;
  right: 0;
}
#present-area .full-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#present-area .full-screen .counter {
  bottom: 15px;
  left: 15px;
}
#present-area .full-screen .nav {
  bottom: 15px;
  right: 15px;
}
#present-area .full-screen .nav .btn:hover {
  background: #201e1e;
  color: #ffffff;
}
#present-area .full-screen .nav .btn-screen:hover {
  background: #201e1e;
}
.nav button {
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  margin-left: 0.5rem;
  font-size: 1.5rem;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.nav .btn {
  background: #464646;
  color: #ffffff;
  border-radius: 0.25rem;
  opacity: 0;
  transform: scale(0);
}
.nav .btn.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.nav .btn-screen {
  background: transparent;
  color: #b6b6b6;
  visibility: hidden;
}
.btn-screen.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.btn-screen.hover {
  color: #ffffff;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.present .content {
  padding: 2em;
  width: 100%;
  height: calc(100% - 100px);
  z-index: 11;
}
.present .content.grid {
  display: grid;
}
.present .content.grid.center {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.content .title {
  font-size: 3em;
  color: purple;
}
.content .sub-title {
  font-size: 2.5em;
  color: purple;
}
.content p {
  font-size: 1.25em;
  margin-bottom: 1rem;
}
.present .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  visibility: none;
}
.slide.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.slide .heading {
  padding: 2rem;
  background-color:#FFFFCC;
  font-size: 2em;
  font-weight: bold;
  color: #d53d3d;
}
</style>
<div class="container">
  <div id="present-area ">
    <section class="present">
      <div class="slide show">
        <div class="heading">
         How to Create Presentation Using JavaScript
        </div>
        <div class="content grid center">
           <h1> Example </h1>
  <h2> Create Presentation Using JavaScript </h2>  
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Overview
        </div>
        <div class="content grid center">
          <h3 class="title">
            Introduction to C+
          </h3>
          <p class="sub-title">
            Basic and Advanced Concepts
          </p>
          <p>Lecture No. 1</p>
          <p>My Email Address</p>
          <p><a href="">dummy@gmail.com</a></p>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Arrays
        </div>
        <div class="content">
          <p>An array is a collection of items stored at contiguous memory locations. The idea is to store multiple items of the same type together. This makes it easier to calculate the position of each element by simply adding an offset to a base value, i.e., the memory location of the first element of the array (generally denoted by the name of the array). The base value is index 0 and the difference between the two indexes is the offset.</p>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Calling a Function
        </div>
        <div class="content">
          <p>A function is a group of statements that together perform a task. Every C program has at least one function, which is main(), and all the most trivial programs can define additional functions. You can divide up your code into separate functions.</p>
          <ul>
            <li>Call by values</li>
            <li>Call by reference</li>
          </ul>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Array Initialization
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Objects
        </div>
      </div>
    </section>
    <section class="counter">
      1 of 6
    </section>
    <section class="nav">
      <button id="full-screen" class="btn-screen show">
        <i class="fas fa-expand"></i>
      </button>
      <button id="small-screen" class="btn-screen">
        <i class="fas fa-compress"></i>
      </button>
      <button id="left-btn" class="btn">
        <i class="fas fa-solid fa-caret-left"></i>
      </button>
      <button id="right-btn" class="btn">
        <i class="fa-solid fa-caret-right"></i>
      </button>
    </section>
  </div>
</div>
<script>
let present = document.querySelector(".present");
let slides = document.querySelectorAll(".slide");
let currentSlide = document.querySelector(".slide.show");
var slideNumber = document.querySelector(".counter");
var toLeftBtn = document.querySelector("#left-btn");
var toRightBtn = document.querySelector("#right-btn");
let presentController = document.querySelector("#present-area ");
var toFullScreenBtn = document.querySelector("#full-screen");
var toSmallScreenBtn = document.querySelector("#small-screen");
var screenStatus = 0;
var currentSlideNo = 1;
var totalSides = 0;
init();
function init() {
  getCurrentSlideNo();
  totalSides = slides.length;
  setSlideNo();
  hideLeftButton();
  hideRightButton();
}
toLeftBtn.addEventListener("click", moveToLeftSlide);
toRightBtn.addEventListener("click", moveToRightSlide);
toFullScreenBtn.addEventListener("click", fullScreenMode);
toSmallScreenBtn.addEventListener("click", smallScreenMode);
function hideLeftButton() {
  if (currentSlideNo == 1) {
    toLeftBtn.classList.remove("show");
  } else {
    toLeftBtn.classList.add("show");
  }
}
function hideRightButton() {
  if (currentSlideNo === totalSides) {
    toRightBtn.classList.remove("show");
  } else {
    toRightBtn.classList.add("show");
  }
}
function moveToLeftSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.previousElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function moveToRightSlide() {
  var tempSlide = currentSlide;
  currentSlide = currentSlide.nextElementSibling;
  tempSlide.classList.remove("show");
  currentSlide.classList.add("show");
  init();
}
function getCurrentSlideNo() {
  let counter = 0;
  slides.forEach((slide, i) => {
    counter++;
    if (slide.classList.contains("show")) {
      currentSlideNo = counter;
    }
  });
}
function fullScreenMode() {
  presentController.classList.add("full-screen");
  toFullScreenBtn.classList.remove("show");
  toSmallScreenBtn.classList.add("show");
  screenStatus = 1;
}
function smallScreenMode() {
  presentController.classList.remove("full-screen");
  toFullScreenBtn.classList.add("show");
  toSmallScreenBtn.classList.remove("show");
  screenStatus = 0;
}
function setSlideNo() {
  slideNumber.innerText = `${currentSlideNo} of ${totalSides}`;
}
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 HTML 内容的演示幻灯片示例。

输出

以下是这个例子的输出。

下一主题Javascript Focus Method

使用 JavaScript 框架创建演示文稿

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

使用 JavaScript 框架创建演示文稿

示例 1

示例 2

相关帖子

JavaScript 一等公民函数

如何使用 JavaScript 在网站上添加 WhatsApp 分享按钮

JavaScript 的用途是什么？

如何在 JavaScript 中发出蜂鸣声

JavaScript 中的 Window Location

如何使用 JavaScript 创建图像映射

从 JavaScript 的 select 列表中移除选项

preventDefault() 和 stopPropagation() 方法之间的区别

JavaScript padStart() 方法

JavaScript 中的随机字符串生成器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题