flipster是一个Javascript库，可以实现酷炫的3D轮播图特效，不但非常美观还动感十足，还具有一下优点：
1、使用了响应式技术，支持手机移动版客户端、支持PC电脑客户端。
2、灵活支持将任何HTML内容实现3D特效，不仅局限于图片、文字、视频等。
3、支持多种方式触发特效：触摸、鼠标滚轮、键盘等方式。
4、内置了多种特效样式，例如：旋转木马特效、封面轮播图效果、旋转轮效果、水平滑动等，也支持自定义主题。
5、支持自定义参数配置，实现不同的效果，例如播放特效执行回调函数Callback、是否开启键盘控制、是否自动播放等等。
6、支持为动态特效设置导航和分类：
通过data-flip-title设置导航标题，例如：data-flip-title="丁香紫"
要设置分类，通过data-flip-category设置主分类标题，例如：
data-flip-category="蓝色"
子分类标题，使用data-flip-title，例如：
data-flip-title="天蓝色"
使用举例说明：
引入样式文件：
<link type="text/css" rel="stylesheet" href="css/jquery.flipster.min.css">
引入javascript库：
<script src="js/jquery.min.js"></script> <script src="js/jquery.flipster.min.js"></script>
演示代码：
<div id="carousel">
<ul class="flip-items">
<li data-flip-title="粉红">
<img src="img/text1.gif" alt="粉红">
</li>
<li data-flip-title="天蓝色" data-flip-category="蓝色">
<img src="img/text5.gif">
</li>
<li data-flip-title="道奇蓝" data-flip-category="蓝色">
<img src="img/text6.gif">
</li>
</ul>
</div>
<script>
var carousel = $("#carousel").flipster({
style: 'carousel',
spacing: -0.5,
nav: true,
buttons: true,
});
</script>flipster动画支持配置的选项说明：
参数名 | 参数值类型 | 说明 | 默认/示例值 |
| itemContainer | String 或 object | 3D特效项目容器的选择器 | ul |
| itemSelector | String 或 object | 3D特效项目容器的子级选择器 | li
|
style | arousel | 主题风格的class类名，内置了四个；如果自定义了风格，填写自己的风格类名称 | coverflow |
spacing | Number | 每个特效项目之间的间距，只能填写数字，0表示无间距，负值表示重叠 | -0.6 |
| click | true false | true:点击、鼠标单击，会动态切换播放下一项 false:禁用鼠标点击播放动效功能。 | true |
| keyboard
| true false | true:启用键盘左右箭头按键控制动效切换。 false:禁用键盘控制动效功能。 | true |
| scrollwheel
| true false | true：表示启用鼠标滚轮或者触控板控制3D动效：上/左=上一个；下/右=下一个 | true |
| touch
| true false | true:启用触摸屏滑动切换动效功能;
false:禁用触摸屏滑动功能。
| true
|
| nav
| true | false：不显示动画导航； true或者'before'：显示动画导航，且位于动画项目之前； | false |
| buttons
| true
false
'custom'
| true/false：显示/隐藏用于切换上一个、下一个的箭头按钮。 “custom”：不会再显示箭头，而是可以自定义buttonPrev 和buttonNext | true
|
| buttonPrev
| text
html
| 切换上一个动效的按钮名称（buttons值为'custom'时才有效）。
| Previous
|
| buttonNext
| text
html
| 切换下一个动效的按钮名称（buttons值为'custom'时才有效）。
| Next
|
| onItemSwitch
| function
| 动效项目切换时的回调函数。 | false
|
| start
| 'center' 或者 number | 表示默认显示第几项。 | ‘center’ |
| fadeIn
| Number
| 毫秒数。
动画项目淡入浅出的速度。
| 400 |
| loop
| true 或者 false | true:循环播放特效
false:不循环播放特效
| false |
| autoplay
| false
或者
milliseconds
| false:不自动播放；
非0正数：动画特效播放时间间隔
| false
|
| pauseOnHover | true 或者 false | 如果是true，则鼠标悬停时暂停播放特效。 | true
|
以调用的方式控制特效：
var flipster = $('.my-flipster').flipster(); // 声明myFlipster，以便引用
flipster.flipster('next'); // 显示下一个动效项目
flipster.flipster('prev'); // 显示上一个动效项目
flipster.flipster('jump', 0); // 调转到指定动效项目
flipster.flipster('jump', $('.my-item')); //跳转到特定动效项目flipster.flipster('play'); //重置自动播放
flipster.flipster('play', 5000); //设定自动播放动效的时间间隔
flipster.flipster('pause'); //暂停自动播放
flipster.flipster('stop'); //停止自动播放动效。
flipster.flipster('index'); //用于删除或新增动效项目，重新索引。