TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

插件开源、体积小、简单实用、功能强大,是你架构移动终端网站的重要选择!

ps:如果你SuperSlide的使用者,那么你会发现它是那么熟悉和易用。

TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:
1、TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和SuperSlide有点不同。
调用方法为:TouchSlide({slideCell:"#slider",effect:"leftLoop"});(slideCell必须为id对象);同样效果,SuperSlide调用方法为:jQuery("#slider").slide({ effect:"leftLoop" });
2、为了方便使用,我用js模拟了简单的jQuery选择器,只支持“#”“.”“标签名称”,用空格隔开。除了slideCell必须用id选择器外,其它titCell等都可以使用,例如:titCell:".title li"
3、除了上述2个不同,其它是一致的,想了解更多可以下载demo研究。

参数 版本 默认值 说明 详细
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名称

TouchSlide 触屏滑动特效插件的更多相关文章

  1. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  2. 黄聪:手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图

    前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和 ...

  3. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

  5. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  7. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  8. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  9. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

随机推荐

  1. PostgreSQL 设置主键的序列值

    1. 问题的提出 PostgreSQL定义TABLE时,主键的字段类型可以设定为自增类型serial,即插入每条记录时,主键的值自动加1.但是,当插入数据的时候指定了具体的主键值,例如主键值从0到50 ...

  2. 简单的linux service(linux服务)编写,运行示例

    1.写一个简单小程序 #include<stdio.h> #include<stdlib.h> int main(int argc,char **argv) { while(1 ...

  3. 割点(Tarjan算法)【转载】

    本文转自:www.cnblogs.com/collectionne/p/6847240.html 供大家学习 前言:之前翻译过一篇英文的关于割点的文章(英文原文.翻译),但是自己还有一些不明白的地方, ...

  4. Generic detail view PostDetailView must be called with either an object pk or a slug.解决

    Django 使用DetailView有这个问题,url,和模板统一调用模型时,用pk,而不是id 如果不是用DetailView,只是简单的视图,则用pk 或者id都可以. urls.py: url ...

  5. Warning: Static member accessed via instance reference

    Warning: Static member accessed via instance reference Shows references to static methods and fields ...

  6. 记录下自己安装cuda以及cudnn

    之前已经装过一次了,不过没有做记录,现在又要翻一堆博客安装,长点记性,自己记录下. 环境 ubuntu16.04 python2.7 商家送过来时候已经装好了显卡驱动,所以省去了一大麻烦. 剩下的就是 ...

  7. 树莓派安装开源智能家居系统 Domoticz

    前言 最近闲来无事开始折腾自己的智能家居系统,对比了几种比较流行的开源智能家居系统,觉得 Domoticz 更适合,Domoticz的官方中文文档,虽然不是很完善但还是可以参考一下.需要注意的是下文用 ...

  8. STM32F030 使用硬件 SPI

    前言 以前玩过一点 STM32 单片机(主要是 STM32F103 系列),去年(2017)STM32F1 涨到不知哪里去了,今年好像降下来了.F0 系列相比 F1 系列少了一些功能,最高主频只到 4 ...

  9. Go语言关键字之1--range

    https://blog.csdn.net/iamlihongwei/article/details/78842857 https://studygolang.com/articles/1952 ht ...

  10. Quartz中Cron详解

    Quartz中的cron跟Linux系统的cron定义不太一样(Linux从分开始) 特殊字符: * 用来表示包含一个范围内的任意值. 例如, 分钟位置的“*” 表示 “每分钟”. ?  当不特定指代 ...