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:; 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="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></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 插件使用介绍的更多相关文章
- 【转】Eclipse插件大全介绍及下载地址
转载地址:http://developer.51cto.com/art/200906/127169.htm 尚未一一验证. eclipse插件大全介绍,以及下载地址 Eclipse及其插件下载网址大全 ...
- Xcode Alcatraz插件管理介绍和使用
Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具 ...
- 03_Elasticsearch如何安装以及相关插件的介绍
03_Elasticsearch如何安装以及相关插件的介绍 elasticsearch -d (-d参数是为了让服务后台运行) Elasticsearch 目录结构: 文件夹 作用 /bin 运行El ...
- Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息
详情请看:Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息 在项目中需要获取到当前设备,例如手机的ID,联网状态,等,然后这个Cordova里有这个插件可以用, ...
- [转]jQueryUI中Datepicker(日历)插件的介绍和使用
http://jqueryui.com/datepicker/ 本文转自:http://blog.csdn.net/redarmy_chen/article/details/7400571 jQuer ...
- JQuery jquerysessionjs插件使用介绍
jquerysessionjs插件使用介绍 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.j 下载地址: https://gitee.com/ishou ...
- Myeclipse10下载,安装,破解,插件,优化介绍
一.Myeclipse10下载与破解 Genuitec 公司发布了MyEclipse 10,一款Genuitec旗下的商业化Eclipse集成开发工具的升级版本.MyEclipse 10基于Eclip ...
- thinkphp 行为扩展以及插件机制介绍
首先行为扩展这个概念是TP架构的核心组成之一,关于行为的解释我就粗略的概括一下吧:TP在从接受到HTTP请求到最终将视图输出,期间经历的很多步骤,这些步骤大家可以在http://document.th ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
随机推荐
- PHP脚本不报错的两点原因
-------------------------------------------------------------------------------------------------- P ...
- Webservice之axis
根据wsdl的url,使用axis1.4生成客户端,并且对webservice进行调用 1.到www.apache.org上去下载axis-bin-1_4.zip,如要关联源代码就把axis-sr ...
- 开发JSP自定义标签
互联网上有很多种自定义标签,今天学的这种非常简单哟 1 编写一个普通类在类中定义一个经常使用得到的 函数 如public String toUpper(String str){ ...... } 2 ...
- 升级nodejs的方法(3)
第一种 找到 目录 删除 再重装 第二种 安装模块n n stable 第三种 nvm https://blog.csdn.net/weibo392/article/details/77368550 ...
- ajax跨域名
跨域环境模拟: 修改host文件 三种解决的方案 1:ifram(display:none) 2:jsonp(注意是只是适合的是get请求) 生成一个带有src的script标签, 3:cros(后台 ...
- iostat磁盘监控工具
安装iostat磁盘监控工具 1.安装 yum install sysstat 2.运行 iostat -k -d -x 1 10 -k:以kb为单位统计 -d:显示磁盘状态 -x:显示详细信息 1: ...
- PHPActiveRecord validates
validates_presence_of #检测是不是为空 为空的话可以抛出异常 *Model类: static $validates_presence_of = array( array('tit ...
- python--第五天总结
装饰器-- @ 重命名原函数,返回函数对象 是一个函数,至少两层执行函数,被装饰的函数作为参数----------------------------------------------------1 ...
- sql去除重复语句
转自芙蓉清秀的BLOG http://blog.sina.com.cn/liurongxiu1211 sql去除重复语句 (2012-06-15 15:00:01) sql 单表/多表查询去除重复记 ...
- openstack 相关服务常用命令整理
1. 数据库: # systemctl start mysqld # systemctl enable mysqld # systemctl status mysqld #mysql> show ...