幻灯片/轮播

PPT演示稿效果JavaScript幻灯片插件

面包多

PPT演示稿效果JavaScript幻灯片插件-创客云
bespoke-fx 是一款类似 PPT 演示稿效果的 JavaScript 幻灯片插件。该幻灯片可以使用键盘的左右方向键来前后切换,它内置了 23 种 CSS3 动画过渡效果,非常实用。

使用方法:

该插件基于 bespoke.js 插件,使用时先要引入 bespoke.js 文件,再引入 bespoke-fx.js 文件。另外还需要引入 main.css 和 animations.css 样式文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="path/to/main.css">
  2. <link rel="stylesheet" href="path/to/animations.css">
  3. <script src="js/bespoke.js"></script>
  4. <script src="js/bespoke-fx.js"></script>

HTML 结构:

该幻灯片插件的基本 HTML 结构如下:

  1. <article>
  2.   <section>Slide 1</section>
  3.   <section>Slide 2</section>
  4.   <section>Slide 3</section>
  5. </article>

初始化插件:

可以使用下面的方法来初始化该幻灯片插件。

  1. bespoke.horizontal.from('article', {
  2.   fx: true
  3. });

或者传入配置参数:

  1. bespoke.vertical.from('article', {
  2.   fx: {
  3.     direction: "vertical",
  4.     transition: "cube",
  5.     reverse: true
  6.   }
  7. });

配置参数:

bespoke-fx 幻灯片插件的配置参数如下:

direction:动画的方向,可以是:horizontal 或 vertical

transition:指定过渡动画的类型,参考下面的多行过渡类型描述

reverse:设置为 true 强迫执行反向动画

过渡动画:

可用的 CSS3 动画过渡动画如下:

  1.     move
  2.     move-fade
  3.     move-both-fade
  4.     move-different-easing
  5.     scale-down-out-move-in
  6.     move-out-scale-up
  7.     scale-up-up
  8.     scale-down-up
  9.     glue
  10.     flip
  11.     fall
  12.     newspaper
  13.     push
  14.     pull
  15.     fold
  16.     unfold
  17.     room
  18.     cube
  19.     carousel
  20.     sides
  21.     slide

设置单独幻灯片的参数,你可以通过 data-bespoke-transition、data-bespoke-direction 和 data-bespoke-reverse 来为某个幻灯片 slide 设置单独的参数。例如:

  1. <section data-bespoke-fx-transition="cube"
  2.       data-bespoke-fx-direction="vertical"
  3.       data-bespoke-fx-reverse="true">Slide</section>

github 地址为:https://github.com/ebow/bespoke-fx

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!