jQuery内容滚动幻灯片插件 - Diapo

本文转自给力技术:http://site518.net/jquery-content-slider-diapo/
    Diapo是一个简单且易于使用的内容滚动幻灯片插件，让你能够在网页中展示很酷的动画切换效果。此插件所能展示的内容不仅仅是图片，甚至可以是视频，其他任意你能想到的网页元素都能显示在其上。
　　插件的滚动控制方式也有自动播放、前后按钮、缩略图导航这3种方式。除此之外，此插件效果也支持在移动设备中浏览，可以通过参数设置是否开启这一选项。
如何使用

　　首先要加载jQuery库、Diapo插件，还要用到jQuery Mobile、Easing和HoverIntent插件，以及相关的CSS样式文件

<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css'>
<script src="jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script>
<script type='text/javascript' src='jquery.hoverIntent.js'></script>
<script type='text/javascript' src='diapo.js'></script>

　　之后在页面中添加要展示的内容

<div>
    <div data-thumb="缩略图.jpg">
      <img src="原图.jpg">
      <div class="caption elemHover fromLeft">
        这里设置副标题
      </div>
    </div>
    ...省略
</div>

　　最后初始化插件，欣赏效果吧~~~

$('.pix_diapo').diapo();

演示