提到幻灯片，大多数人首先想到的肯定是PPT。你知不知道通过前端Web技术也能创建出绚丽的幻灯片？在应用程序中能实现的效果在浏览器中同样也都能实现。

就像构建一个网站一样，我们可以通过HTML5,CSS3和Javascript技术来构建一个幻灯片，我们可以通过HTML5的slideshows来展示照片、视频和音频这些多媒体文件，然后通过CSS和Javascript创建惊人的幻灯片切换效果，这些效果是很多幻灯片应用程序都做不到的。

使用Web端的幻灯片会有三个明显的：

• 跨平台: 只要系统中有类似Chrome的浏览器，你就可以在任何电脑，任何平台中进行幻灯片的展示，再也不用担心Linux中没有PowerPoint了。
• 便捷性: 你可以忘记你的U盘了，Web版的幻灯片能很自然地随时上传和下载，有网络的地方就有你的幻灯片。
• 开源: 开源意味着你不用为漂亮的幻灯片模版付费。

下面，我会列举出9个Web版幻灯片构建工具，你可以免费地使用它们，虽然它们是开源的，如果你对HTML &
CSS不太了解，也可能会有些费力。

Ancesor.js

Ascensor是一个将电梯式的jquery插件，这个插件可以帮助我们定位页面任何内容块到画布， Ascensor所实现的效果很新颖，你可以用四个方向键来控制网页内容的移动，类似电梯一层层移动的效果，此插件可定制性很高，可以设定是否启用方向键控制，是否显示导航等等。

Reveal.js

reveal.js是一个制作3D幻灯片效果的插件，它同时应用最新的web技术，来创建漂亮的html演示效果。 reveal.js不依赖其他任何javascript库，是一个独立的javascript插件库。它应用了最新web新技术，所以需要浏览器对CSS 3D变形的支持。

IO 2012 Slides

2012年的GoogleIO大会上演讲所用的幻灯片，它是用HTML5写的，你可以通过Markdown创建滑动效果。

Slides

当你演讲时不再需要PPT了，这个框架通过纯HTML代码展示幻灯片的主题、布局，通过CSS实现幻灯片切换效果，然后用了一个简单的Javascript MVC框架来展示它们，你不需要使用第三方框架来运行它们。

CSSS

由Lea Verou创建，CSSS就像它的名字一样简单，它是一个CSS式的幻灯片。当然它不是由纯CSS实现的，代码中有少量的Javascript用来管理切换这一部分。

Deck.js

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

Flowtime.js

Flowtime.js是基于SlideCaptain引擎构建的，类似于地图模型并通过HTML切换所在位置。网站提供直接创建幻灯片功能，你可以到官网去感受一下。

Jmpress.js

非常酷的幻灯片插件，基于 CSS3 transform 和 transition 实现，带水平切换、旋转切换和3D效果。

Impress.js

impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

英文原文地址：http://www.queness.com/post/17130/9-web-based-solution-to-create-stunning-slideshows-presentation