wordpress添加响应旋转木马flexisel.js效果

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,据悉,曼城准备掏出1.43亿英镑(约合1.6亿欧元)来匹配皇马的报价。,此外,由于北京路网现状以放射线为主,如遇大型国际活动和应急突发事件,没有疏导绕行路线可选,原规划的对外10条普通国道放射线和7条发射线及1条南北纵线国家高速公路,都要通过北京六环路进行调节和疏导,既不便捷又不经济。,由于开发商还有三套房子没有交付,且认为物业管理有漏洞,死者家属将整栋大楼,除一楼外,所有的住户、物业公司以及小区开发商告上法庭。

flexisel

描述: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://www.513jianzhu.com/gfjsyldcwz/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.513jianzhu.com/gfjsyldcwz/demo/201409/jquery-flexisel/

百度网盘下载:http://www.513jianzhu.com/gfjsyldcwz/s/1cosPBK


发布日期:

所属分类: JavaScript/jquery 标签: