TouchSlide 插件使用介绍

TouchSlide

可用于javascript触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等

---

方法引用（本次用轮播图为例）：

Js引入：

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);
                /* 取消链接高亮 */
            }

主代码:

                

                    

                
                

                    

                            
![](images/m1.jpg)
                            
![](images/m2.jpg)
                            
![](images/m3.jpg)
                            
![](images/book1.jpg)
                    
                
            
            
            

==注意在这个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