注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

响应式旋转木马插件jquery Flexisel

媒体 fishcity 2538浏览

响应式旋转木马jquery Flexisel

Flexisel是一款响应式的旋转木马jquery插件,使用简单,你所需要做的就是把图片放到无序列表中,然后在页面加载的时候初始化插件就可能了,Flexisel会自动获取图片的宽度,并自动适应屏幕的宽度。

jquery实例:Flexisel使用方法

引入核心文件

<link href="css/style.css" rel="stylesheet" type="text/css" />
<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>

写入HTML,无序列表包含图片

<ul id="flexiselDemo1"> 
    <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>

写入JS初始化

 //基本写法
  $("#flexiselDemo1").flexisel();
  
 //带参数
 $(window).load(function() {
  $("#flexiselDemo1").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
      }
    }
  });
 });

转载请注明:jQ酷 » 响应式旋转木马插件jquery Flexisel

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。