jquery.flexisel.js 是一款响应式旋转木马插件，它可以拥有幻灯片播放，图片展示，文章展示等等，我们今天手动把这个插件集成到wordpress中。本站提供了DEMO下载。
描述：flexisel.js响应适应屏幕宽度旋转木马插件，效果很好。它设置为启用自动播放，定义动画的速度和悬停。
特点：
1）Flexisel 将顺应需求适应屏幕宽度变小；
2）根据项目的数量可以更改显示的屏幕宽度；
3）其他选项包括自动播放，动画速度时右和左。
1、引入jQuery文件和jquery.flexisel.js
建议jquery1.7.1以上，wp自带的jquery版本较低，你需要重新引入：WordPress引入css/js两种方法以下只是静态引入示例，在wp中你可以选择优化的引入方式。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.flexisel.js"></script>
2、引入CSS
<link href="css/style.css" rel="stylesheet" type="text/css" />
3、html结构
<ul id="flexisel"> <li><img src="images/logo-nyt.png" /></li> <li><img src="images/logo-microsoft.png" /></li> <li><img src="images/logo-ebay.png" /></li> <li><img src="images/logo-hp.png" /></li> <li><img src="images/logo-youtube.png" /></li> </ul>
如果你放在首页，要循环展示某个分类，那把li循环就可以了。这里只是静态说明结构。
4、初始化Js
//基本写法 $("#flexisel").flexisel(); //带参数 $(window).load(function() { $("#flexisel").flexisel({ visibleItems: 4, //一行显数的个数 animationSpeed: 200, //动画时间 autoPlay: false, //自动播放 autoPlaySpeed: 3000, //播放间隔时间 pauseOnHover: true, //鼠标悬浮是否停止播放 clone:false, //是否使用克隆 enableResponsiveBreakpoints: true, //是否开启响应式 responsiveBreakpoints: { portrait: { //项目名，可随意命名 changePoint:480, //屏幕最大像素，意思为当屏幕最大像素为480时，只显示一个Item，即例子只显示一张图片。 visibleItems: 1 //只显示一个Item，下面的雷同 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); });
5、示例下载：
DEMO示例 http://www.jqcool.net/demo/201409/jquery-flexisel/