首页
话题
消息
手册
我的

Deck.js 基于 jQuery 的 Slideshow 幻灯片插件

发布于 2019-07-11 字数 4922 浏览 964 评论 0

Deck.js 是一个用于创建幻灯片展示效果的 JavaScript Library。它提供有模板和主题让 HTML 新手也能够很容易构建一个标准的 Slideshow。Deck.js 需要 jQuery 1.6+ 以上的版本支持,经测试支持IE7+, Chrome, FF, Safari 和 Opera 等浏览器。

Deck.js 基于 jQuery 的 Slideshow 幻灯片插件

建设一个现代 HTML 幻灯片演示 JavaScript 库。Deck.js 具有足够的灵活性,让先进的 CSS 和 JavaScript 开发者高度定制的平台,而且还提供了模板和主题的 HTML 让初学者建立一个标准的幻灯片。

兼容性

Deck.js 能够兼容 IE7+, Chrome, FF, Safari 和 Opera 等主流浏览器。

使用方法

当你 下载deck.js,它将包括一个文件名为 boilerplate.html。你可以在这一页编辑幻灯片,并在您的网络浏览器查看他的效果。然后当你舒适的自定义面板,你可以编辑模板的各个部分或使自己适应你的需要。

1、编写简单 HTML 代码结构

幻灯片的代码需要添加一个 slide 类。

<section class="slide">
  <h2>How to Make a Deck</h2>
  <ol>
    <li>
      <h3>Write Slides</h3>
      <p>Slide content is simple HTML.</p>
    </li>
    <li>
      <h3>Choose Themes</h3>
      <p>One for slide styles and one for deck transitions.</p>
    </li>
  </ol>
</section>

2、选择合适的你喜欢的主题样式

引入插件的默认样式文件,你可以自定义颜色,字体,和幻灯片的内容布局。

Deck.js 基于 jQuery 的 Slideshow 幻灯片插件

<link rel="stylesheet" href="/path/to/css/style-theme.css">

使用动画

定义的转换,使用CSS3幻灯片之间的过渡。能力不足的浏览器回到镜头。但你不使用这些浏览器给你的介绍。

<link rel="stylesheet" href="/path/to/css/transition-theme.css">

3、调用插件

添加额外的功能到您的网页中,核心给你基本的幻灯片功能,左、右箭头导航,但你可能需要更多的。这里包括在这Deck上:

  • deck.goto:添加一个快捷键跳转到任何幻灯片编号。命中克,键入在幻灯片编号,并回车。
  • deck.menu:添加一个菜单,让你看到在网格中的所有幻灯片。打米到切换到菜单视图,继续航行您的甲板,并击中米返回到正常的看法。触摸设备可以双击面板切换视图。
  • deck.navigation:增加较少的键盘倾斜点击左键和右键。
  • deck.status:添加页码指示器。(电流/总数)
  • deck.scale:尺度各滑动配合在这些浏览器支持使用CSS甲板集装箱改造。

下载包中每个扩展文件夹中包含必要的 JavaScript、CSS 和 HTML 文件。一个完整的扩展模块包括 Deck.js 列表。

那最后一张幻灯片有几个步骤。创建的子步骤中的幻灯片:

<section class="slide">
  <h2>Extensions</h2>
  <p>Core gives you basic slide functionality...</p>
  <ul>
    <li class="slide">
      <h3>deck.goto</h3>
      <p>Adds a shortcut key to jump to any slide number...</p>
    </li>
    <li class="slide">...</li>
    <li class="slide">...</li>
    <li class="slide">...</li>
  </ul>
</section>

4、其他元素:image

Deck.js 基于 jQuery 的 Slideshow 幻灯片插件

<img src="http://placekitten.com/600/375" alt="Kitties">

5、其他元素:Blockquotes

<blockquote cite="http://example.org">
  <p>Food is an important part of a balanced diet.</p>
  <p><cite>Fran Lebowitz</cite></p>
</blockquote>

6、其它元素:Video Embeds

嵌入视频从您最喜爱的在线视频服务或与HTML5视频元素。

<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

如果你想学习制作你自己的主题,扩展 Deck.js 的样式或功能,请参见 documentation

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!