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

而後就完成了