TouchSlide 插件使用介紹

TouchSlide（PC端插件http://www.superslide2.com/demo.html#effect1）

可用於javascript觸屏滑動特效插件，移動端滑動特效，觸屏焦點圖，觸屏Tab切換，觸屏多圖切換等

---

方法引用（本次用輪播圖為例）：

Js引入：

<script src="js/TouchSlide.1.1.js"></script>

CSS樣式：

body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; }
           img { border:0; margin: 0; padding: 0;   }
            
            .focus {
                width: 100%;
                height: 140px;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
            }
            
            .focus .hd {
                width: 100%;
                height: 11px;
                position: absolute;
                z-index: 1;
                bottom: 5px;
                text-align: center;
            }
            
            .focus .hd ul {
                display: inline-block;
                height: 5px;
                padding: 3px 5px;
                background-color: rgba(255, 255, 255, 0.7);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                font-size: 0;
                vertical-align: top;
            }
            
            .focus .hd ul li {
                display: inline-block;
                width: 5px;
                height: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                background: #8C8C8C;
                margin: 0 5px;
                vertical-align: top;
                overflow: hidden;
            }
            
            .focus .hd ul .on {
                background: #FE6C9C;
            }
            
            .focus .bd {
                position: relative;
                z-index: 0;
            }
            
            .focus .bd li img {
                width: 100%;
                height: 140px;
                background: url(images/loading.gif) center center no-repeat;
            }
            
            .focus .bd li a {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                /* 取消鏈接高亮 */
            }

主代碼:

<div id="focus" class="focus">
                <div class="hd">
                    <ul></ul>
                </div>
                <div class="bd">
                    <ul>
                            <li><a href="#">![](images/m1.jpg)</a></li>
                            <li><a href="#">![](images/m2.jpg)</a></li>
                            <li><a href="#">![](images/m3.jpg)</a></li>
                            <li><a href="#">![](images/book1.jpg)</a></li>
                    </ul>
                </div>
            </div>
            <!--這里是為了在這個DIV完畢后立即執行JS，避免整個頁面加載完畢才執行。-->
            <script type="text/javascript">
                TouchSlide({ 
                    slideCell:"#focus",
                    titCell:".hd ul", //開啟自動分頁 autoPage:true ，此時設置 titCell 為導航元素包裹層  導航元素對象，鼠標觸發元素即原標圖點等。
                    mainCell:".bd ul",  //要輪播的內容 圖片
                    effect:"leftLoop",  //輪播方向 向左循環滾動
                    autoPlay:true,//自動播放
                    autoPage:true, //自動分頁
                    delayTime: 200, // 切換圖片的延遲時間。 默認為200.
                    interTime: 2500, // 圖片停留的時間，即各多少時間開始下一張圖，默認為2500.
                    switchLoad:"_src" //切換加載，真實圖片路徑為"_src" 
                });
            </script>

==注意在這個DIV完畢后立即執行JS，避免整個頁面加載完畢才執行==

此插件功能強大，此輪播圖較為簡單，每張頁面輪播完畢后還可以觸發函數，endFun。

用法 endFun:function(i,c){ }； 其中i為當前分頁，c為總頁數。

---

此處引用==SuperSlide==示范。

jQuery("#slideBox").slide({ mainCell:".bd ul",autoPlay:true,effect:"left",delayTime:2000,interTime:8000,
    startFun:function(i,c){
        $("#textarea").val( $("#textarea").val()+ "第"+(i+1)+"個效果開始，同時執行startFun函數。當前分頁狀態："+(i+1)+"/"+c+"\r\n")
    },
    endFun:function(i,c){
        $("#textarea").val( $("#textarea").val()+ "第"+(i+1)+"個效果結束，開始執行endFun函數。當前分頁狀態："+(i+1)+"/"+c+"\r\n")
    }
});

若對此插件感興趣你可以點擊下方鏈接去官方首頁： http://www.superslide2.com/index.html