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

本文转自给力技术:http://site518.net/jquery-content-slider-diapo/

Diapo是一个简单且易于使用的内容滚动幻灯片插件，让你能够在网页中展示很酷的动画切换效果。此插件所能展示的内容不仅仅是图片，甚至可以是视频，其他任意你能想到的网页元素都能显示在其上。

插件的滚动控制方式也有自动播放、前后按钮、缩略图导航这3种方式。除此之外，此插件效果也支持在移动设备中浏览，可以通过参数设置是否开启这一选项。

如何使用

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

<linkrel='stylesheet'id='style-css'href='diapo.css'type='text/css'>

<scriptsrc="jquery.min.js"type="text/javascript"></script>

<scripttype='text/javascript'src='jquery.easing.1.3.js'></script>

<scripttype='text/javascript'src='jquery.hoverIntent.js'></script>

<scripttype='text/javascript'src='diapo.js'></script>

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

<div>

<divdata-thumb="缩略图.jpg">

<imgsrc="原图.jpg">

<divclass="captionelemHoverfromLeft">

这里设置副标题

</div>

</div>

...省略

</div>

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

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

演示