flexisel.js响应适应屏幕宽度旋转木马插件

引入插件
<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="flexisel"> 
    <li><img src="images/logo-1.png" /></li>
    <li><img src="images/logo-2.png" /></li>    
    <li><img src="images/logo-3.png" /></li>     
    <li><img src="images/logo-4.png" /></li> 
    <li><img src="images/logo-5.png" /></li>                                                          
</ul>

js

 $(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
      }
    }
  });
 });

然后就完成了  

转载于:https://www.cnblogs.com/lostu5/p/9243001.html