javascript触屏滑动特效插件，移动端滑动特效，TouchSlide触屏多图切换
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用TouchSlide.js制作触屏多图切换效果， TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端， 能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 插件开源、体积小、简单实用、功能强大，是你架构移动终端网站的重要选择！

主要js代码与解析

<script type="text/javascript">
    TouchSlide({
        slideCell: "#focus",
        titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell: ".bd ul",
        effect: "left",
        autoPlay: true, //自动播放
        autoPage: true, //自动分页
        switchLoad: "_src" //切换加载，真实图片路径为"_src" 
    });
    </script>

更多参数说明

  • slideCell 1.0 "#touchSlide" 容器对象（执行效果的对象，必须是id对象！）

  • titCell 1.0 ".hd li" 导航元素对象

  • mainCell 1.0 ".bd" 切换元素的包裹层对象

  • autoPage 1.0 false 系统自动分页，需结合titCell使用，若为true，则titCell为导航元素的包裹层对象

  • effect 1.0 "left" 效果 || left：左滚动；|| leftLoop：左循环滚动；

  • autoPlay 1.0 false 自动运行

  • delayTime 1.0 200 毫秒；切换效果持续时间（执行一次效果用多少毫秒）。

  • interTime 1.0 2500 毫秒；自动运行间隔（隔多少毫秒后执行下一个效果）

  • switchLoad 1.0 null 内容切换加载，暂时只支持图片，必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称，例如switchLoad:"_src"

  • startFun 1.0 null 每次切换效果开始时执行函数，用于处理特殊情况或创建更多效果。用法 satrtFun:function(i,c){ }； 其中i为当前分页，c为总页数

  • endFun 1.0 null 每次切换效果结束时执行函数，用于处理特殊情况或创建更多效果。用法 endFun:function(i,c){ }； 其中i为当前分页，c为总页数

  • pageStateCell 1.0 ".pageState" 分页状态对象，用于显示分页状态，例如：2/3

  • prevCell 1.0 ".prev" 前一个/页按钮对象。

  • nextCell 1.0 ".next" 后一个/页按钮对象。

  • pnLoop 1.0 true 前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色

  • defaultIndex 1.0 0 默认的当前位置索引。0是第一个； defaultIndex:1 时，相当于从第2个开始执行

  • titOnClassName 1.0 "on" 当前titCell位置自动增加的class名称