類比iphone案頭切屏carousel小類庫

1）做什麼的：

由於翻遍jquery mobile,也沒有找到滿意的，類比iphone案頭切屏功能類庫。

分享一個最近寫的carousel小類庫，第一次發布，難免有些bug，後續維護。

主要針對智能行動裝置，類比iphone案頭切屏的小js類庫。

 

2）代碼和樣本地址：github：https://github.com/withasi/es_Carousel

一個樣本說明：http://61.155.178.185/c/

 

3）類說明如下：

　　

/************** define： start  **************//** * @class:  Carousel類 * @example  var testCarousel = new es.Carousel("view","content") * @param overviewEl {HTMLElement|String} 為視角容器，為視角容器，即 Carousel的視角 * @param contentEl {HTMLElement||String} 為上邊容器的子容器，內容區的容器，寬度為page之和，為page頁面的父容器 * @param options {Object} 構造設定，參數說明： *           {                clientWidth : window.innerWidth, //客戶區寬度                clientHeight : window.innerHeight, //客戶區高度                swipeTime:300,//切換時間，單位為ms                pageSwitchThred:100,//頁面切換閾值，單位為px。表示當左右切換時，當切換的寬度為大於pageSwitchThred時，無論速度，在彈起時均切換                isIndicator:true,//是否建立指標                useTransform:true, //如果沒有採用transform,則直接通過改變style的top和left屬性                useTransition:true //如果沒有採用Transition,則設定style的top和left作為變換屬性，而非指定transform            } * @public */

 

4）應用舉例如下：

/************** example： start  **************/ <div class="view" id="view">     <div id="content" class="carouselContent">         <div class="contentpage">             <p>page 1</p>         </div>         <div class="contentpage">             <p>page 2</p>         </div>         <div class="contentpage">             <p>page 3</p>         </div>     </div> </div> </body> <script type="text/javascript">     window.onload = function(){         /**          * @description:  Carousel類          * @param overviewEl {HTMLElement||String} 為視角容器，為視角容器，即 Carousel的視角          * @param overviewEl {HTMLElement||String} 為上邊容器的子容器，內容區的容器，寬度為page之和，為page頁面的父容器          * @param options {Object} 構造設定          *           {                 clientWidth : window.innerWidth, //客戶區寬度                 clientHeight : window.innerHeight, //客戶區高度                 swipeTime:300,//切換時間，單位為ms                 pageSwitchThred:100,//頁面切換閾值，單位為px。表示當左右切換時，當切換的寬度為大於pageSwitchThred時，無論速度，在彈起時均切換                 isIndicator:true//是否建立指標             }          * @type {*}          */         var testCarousel = new es.Carousel("view","content");     } </script> /************** example： end  **************/