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:; padding:; list-style: none; vertical-align: middle; font-weight:normal; }
img { border:; margin:; padding:; } .focus {
width: 100%;
height: 140px;
margin: 0 auto;
position: relative;
overflow: hidden;
} .focus .hd {
width: 100%;
height: 11px;
position: absolute;
z-index:;
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:;
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:;
} .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
 

TouchSlide 插件使用介绍的更多相关文章

  1. 【转】Eclipse插件大全介绍及下载地址

    转载地址:http://developer.51cto.com/art/200906/127169.htm 尚未一一验证. eclipse插件大全介绍,以及下载地址 Eclipse及其插件下载网址大全 ...

  2. Xcode Alcatraz插件管理介绍和使用

    Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具 ...

  3. 03_Elasticsearch如何安装以及相关插件的介绍

    03_Elasticsearch如何安装以及相关插件的介绍 elasticsearch -d (-d参数是为了让服务后台运行) Elasticsearch 目录结构: 文件夹 作用 /bin 运行El ...

  4. Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息

    详情请看:Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息 在项目中需要获取到当前设备,例如手机的ID,联网状态,等,然后这个Cordova里有这个插件可以用, ...

  5. [转]jQueryUI中Datepicker(日历)插件的介绍和使用

    http://jqueryui.com/datepicker/ 本文转自:http://blog.csdn.net/redarmy_chen/article/details/7400571 jQuer ...

  6. JQuery jquerysessionjs插件使用介绍

    jquerysessionjs插件使用介绍 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j 下载地址: https://gitee.com/ishou ...

  7. Myeclipse10下载,安装,破解,插件,优化介绍

    一.Myeclipse10下载与破解 Genuitec 公司发布了MyEclipse 10,一款Genuitec旗下的商业化Eclipse集成开发工具的升级版本.MyEclipse 10基于Eclip ...

  8. thinkphp 行为扩展以及插件机制介绍

    首先行为扩展这个概念是TP架构的核心组成之一,关于行为的解释我就粗略的概括一下吧:TP在从接受到HTTP请求到最终将视图输出,期间经历的很多步骤,这些步骤大家可以在http://document.th ...

  9. Bootstrap Paginator 分页插件参数介绍及使用

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

随机推荐

  1. PHP脚本不报错的两点原因

    -------------------------------------------------------------------------------------------------- P ...

  2. Webservice之axis

    根据wsdl的url,使用axis1.4生成客户端,并且对webservice进行调用   1.到www.apache.org上去下载axis-bin-1_4.zip,如要关联源代码就把axis-sr ...

  3. 开发JSP自定义标签

    互联网上有很多种自定义标签,今天学的这种非常简单哟 1 编写一个普通类在类中定义一个经常使用得到的 函数 如public String toUpper(String str){ ...... } 2 ...

  4. 升级nodejs的方法(3)

    第一种 找到 目录 删除 再重装 第二种 安装模块n n stable 第三种 nvm https://blog.csdn.net/weibo392/article/details/77368550 ...

  5. ajax跨域名

    跨域环境模拟: 修改host文件 三种解决的方案 1:ifram(display:none) 2:jsonp(注意是只是适合的是get请求) 生成一个带有src的script标签, 3:cros(后台 ...

  6. iostat磁盘监控工具

    安装iostat磁盘监控工具 1.安装 yum install sysstat 2.运行 iostat -k -d -x 1 10 -k:以kb为单位统计 -d:显示磁盘状态 -x:显示详细信息 1: ...

  7. PHPActiveRecord validates

    validates_presence_of #检测是不是为空 为空的话可以抛出异常 *Model类: static $validates_presence_of = array( array('tit ...

  8. python--第五天总结

    装饰器-- @ 重命名原函数,返回函数对象 是一个函数,至少两层执行函数,被装饰的函数作为参数----------------------------------------------------1 ...

  9. sql去除重复语句

    转自芙蓉清秀的BLOG http://blog.sina.com.cn/liurongxiu1211  sql去除重复语句 (2012-06-15 15:00:01) sql 单表/多表查询去除重复记 ...

  10. openstack 相关服务常用命令整理

    1. 数据库: # systemctl start mysqld # systemctl enable mysqld # systemctl status mysqld #mysql> show ...