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