演示是一种新趋势。无论是推销一个想法，展示你的工作，还是简单地向利益相关者更新你的项目状态，我们都有理由进行演示

这是一个jQuery支持的演示插件，使用户可以创建更专业的演示，并使用很棒的jQuery和/或CSS3动画。玩得开心。

如何使用它:

1.在文档中加载jQuery演示插件的文件。

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Presentation CSS -->
<link rel="stylesheet" href="css/presentation.css" />
<!-- Presentation js -->
<script src="js/presentation.js"></script>

2.加载Animate.css库以获得很酷的CSS3动画。

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Presentation CSS -->
<link rel="stylesheet" href="css/presentation.css" />
<!-- Presentation js -->
<script src="js/presentation.js"></script>

3.创建一个容器来容纳您的演示文稿。

<div id="presentationExample"></div>

4.将幻灯片添加到演示文稿中（一组对象）。

var data = [{
    // ************************ Slide 1 ************************
    //  HTML:
    //  <h1 class="companyName">Your Company Name</h1>
    //  below CSS styles apply to <h1>:
    //  #presentationDiv .slide * { position: absolute; font-weight: 300; margin: 0; padding: 0; }
    //  .companyName { left: 100px; top: -60px; }
    //  after 1 second HTML will be <h1 class="companyName" style="top: 150px">Your Company Name</h1>
    //  after 9 seconds HTML will be <h1 class="companyName" style="top: 150px; opacity: 0;">Your Company Name</h1>
    name: 'h1', // <h1></h1>
    content: "Your Company Name", // <h1>Your Company Name</h1>
    attr: { // <h1 class="companyName">Your Company Name</h1>
      'class': 'companyName'
    },
    animation: ['top', 150, 500, 1000], // 1st and 2nd proparties are style {top: 150px; } and 3rd is a animaton speed "0.5 second" and 4th is time duration "1 second". So after 1 second <h1> has this animation and it will appear in the presentation
    cssEffect: { // after 1 second <h1> has flipInY css effect
      type: 'flipInY', // CSS effect
      time: 1000 // time duration
    },
    afterAnimation: ['opacity', 0, 1000, 9000] // 1st and 2nd proparties are style {opacity: 0; } and 3rd is a animaton speed "1 second" and 4th is time duration "9 second". So after 9 second <h1> has this animation and it will hide from the presentation
    }, {
    name: 'img',
    attr: {
      'src': 'images/chrome.png',
      'class': 'chrome'
    },
    animation: ['bottom', 266, 1000, 5000],
    cssEffect: {
      type: 'flip',
      time: 5000
    },
    afterAnimation: ['opacity', 0, 1000, 9000]
    },
    // more slides here
]

5.初始化演示容器上的插件。完成。

$('#presentationDiv').jPresentation({
  'data': data
});

6.设置要在“开始”按钮中显示的文本。

$('#presentationDiv').jPresentation({
  'startButtonText': "Start Presentation",
});

预览截图

jQuery中 简易动态演示插件 Presentation.js