자바스크립트로 슬라이드쇼 효과를 만드는 방법-JS 튜토리얼-php.cn

자바스크립트로 슬라이드쇼 효과를 만드는 방법

清浅

풀어 주다： 2022-04-02 13:55:21

원래의

5137명이 탐색했습니다.

Javascript의 Revealjs 프레임워크를 통해 슬라이드 효과를 얻을 수 있습니다. 섹션 태그를 사용하여 단일 페이지 슬라이드를 만들고 여기에 텍스트와 그림을 추가할 수 있습니다.

자바스크립트로 슬라이드쇼 효과를 만드는 방법

[추천 과정: JavaScript 튜토리얼 】

JavaScript 언어를 사용하여 슬라이드 효과를 구현하려면 프레임워크인 discover.js 프레임워크를 사용해야 합니다. 다음으로 기사에서는 구체적인 예를 통해 슬라이드 효과를 구현하는 방법을 설명합니다

reveal.js Framework 소개

reveal.js 프레임워크는 HTML 코드를 통해 아름다운 슬라이드쇼 효과를 쉽게 만들 수 있도록 도와주는 프레임워크입니다. 우리가 일상 업무에서 사용하는 PPT 슬라이드와 똑같습니다. Reveal.js는 다른 자바스크립트 라이브러리에 의존하지 않는 프레임워크로, 독립적인 자바스크립트 플러그인 라이브러리라고 할 수 있습니다. 다양한 슬라이드 전환 효과를 제공하며 훌륭한 프레젠테이션 프레임워크입니다.

자바스크립트로 슬라이드쇼 효과를 만드는 방법

reveal.js 프레임워크 다운로드 주소: https://github.com/hakimel/reveal.js

(1) Reveal.js 프레임워크를 다운로드하고 html 파일

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href=".\reveal.js-master\css\reveal.css">
  <!-- 引入主题 -->
  <link rel="stylesheet" href=".\reveal.js-master\css\theme\moon.css">
  <!-- 用于显示代码高亮 -->
  <link rel="stylesheet" href=".\reveal.js-master\lib\css\zenburn.css">
</head>
<body>
  <script type="text/javascript" src=".\reveal.js-master\js\reveal.js"></script>
</body>
</html>

로그인 후 복사

( 2) 외부 파일이 도입된 후 슬라이드쇼 만들기를 시작합니다.

먼저 html 페이지에 두 개의 div 블록 수준 요소를 만듭니다. 공개 및 슬라이드 클래스 이름을 사용해야 합니다. 그런 다음 div의 두 번째 레이어에 섹션 태그를 만들어 슬라이드 페이지를 생성합니다. HTML 페이지가 빌드된 후에는 js 코드에서 페이지를 초기화해야 합니다. 이렇게 간단한 슬라이드쇼 효과가 완성되었습니다

아래와 같습니다.

<div class="reveal" style="width:450px;height:300px;border: 1px solid #fff;margin:250px auto;">
    <div class="slides">
      <section>
        <h1>幻灯片1</h1>
        <p>幻灯片正文</p>
      </section>
      <section>
        <h1>幻灯片2</h1>
        <p>幻灯片正文</p>
      </section>
    </div>
  </div>
<script type="text/javascript" src="./reveal.js-master/js/reveal.js"></script>
<script type="text/javascript">Reveal.initialize();</script>

로그인 후 복사

효과 그림은 다음과 같습니다.

자바스크립트로 슬라이드쇼 효과를 만드는 방법