Deck.js是一个用于创建幻灯片展示效果的JavaScriptLibrary。它提供有模板和主题让HTML新手也能够很容易构建一个标准的Slideshow。Deck.js需要jQuery1.6+以上的版本支持,经测试支持IE7+,Chrome,FF,Safari和Opera等浏览器。
建设一个现代HTML幻灯片演示JavaScript库。Deck.js具有足够的灵活性,让先进的CSS和JavaScript开发者高度定制的平台,而且还提供了模板和主题的HTML让初学者建立一个标准的幻灯片。
兼容性
Deck.js能够兼容IE7+,Chrome,FF,Safari和Opera等主流浏览器。
使用方法
当你下载deck.js,它将包括一个文件名为boilerplate.html。你可以在这一页编辑幻灯片,并在您的网络浏览器查看他的效果。然后当你舒适的自定义面板,你可以编辑模板的各个部分或使自己适应你的需要。
1、编写简单HTML代码结构
幻灯片的代码需要添加一个slide类。
sectionclass="slide"hHowtoMakeaDeck/hollihWriteSlides/hpSlidecontentissimpleHTML./p/lilihChooseThemes/hpOneforslidestylesandonefordecktransitions./p/li/ol/section
、选择合适的你喜欢的主题样式
引入插件的默认样式文件,你可以自定义颜色,字体,和幻灯片的内容布局。
linkl="stylesheet"hf="/path/to/css/style-theme.css"
使用动画
定义的转换,使用CSS幻灯片之间的过渡。能力不足的浏览器回到镜头。但你不使用这些浏览器给你的介绍。
linkl="stylesheet"hf="/path/to/css/transition-theme.css"
、调用插件
添加额外的功能到您的网页中,核心给你基本的幻灯片功能,左、右箭头导航,但你可能需要更多的。这里包括在这Deck上:
deck.goto:添加一个快捷键跳转到任何幻灯片编号。命中克,键入在幻灯片编号,并回车。deck.menu:添加一个菜单,让你看到在网格中的所有幻灯片。打米到切换到菜单视图,继续航行您的甲板,并击中米返回到正常的看法。触摸设备可以双击面板切换视图。deck.navigation:增加较少的键盘倾斜点击左键和右键。deck.status:添加页码指示器。(电流/总数)deck.scale:尺度各滑动配合在这些浏览器支持使用CSS甲板集装箱改造。
下载包中每个扩展文件夹中包含必要的JavaScript、CSS和HTML文件。一个完整的扩展模块包括Deck.js列表。
那最后一张幻灯片有几个步骤。创建的子步骤中的幻灯片:
sectionclass="slide"hExtensions/hpCogivesyoubasicslidefunctionality.../pulliclass="slide"hdeck.goto/hpAddsashortcutkeytojumptoanyslidenumber.../p/liliclass="slide".../liliclass="slide".../liliclass="slide".../li/ul/section
4、其他元素:image
imgsrc="