当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > JavaScript 使用框架创建演示文稿

JavaScript 使用框架创建演示文稿

JavaScript 使用框架创建演示文稿

在本文中，我们将了解如何使用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>
          Lecture No. 1
          My Email Address
        </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">
          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.
          <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内容创建了一个演示文稿的示例。

输出：

以下是这个示例的输出。

JavaScript 使用框架创建演示文稿

示例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>
          Lecture No. 1
          My Email Address
          <a href="">dummy@gmail.com</a>
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Arrays
        </div>
        <div class="content">
          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.
        </div>
      </div>
      <div class="slide">
        <div class="heading">
          Calling a Function
        </div>
        <div class="content">
          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.
          <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 使用框架创建演示文稿

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程