php轮播插件,移动端h5轮播插件swipe实例详解
swipe.js是一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。
在移动端的h5页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐swipe插件,不过百度搜索到的这个插件,里面介绍的不是很完整,我给大家补充下可能需要的功能。
Swipe函数介绍
下面就为大家介绍下Swipe JS的使用方法,Swipe有以下几个参数:startSlide: 4, //起始图片切换的索引位置
auto: 3000, //设置自动切换时间,单位毫秒
continuous: true, //无限循环的图片切换效果
disableScroll: true, //阻止由于触摸而滚动屏幕
stopPropagation: false, //停止滑动事件
callback: function(index, element) {}, //回调函数,切换时触发
transitionEnd: function(index, element) {} //回调函数,切换结束调用该函数。
除此之外,还有一些比较常用的API方法,例如:prev():上一页
next():下一页
getPos():获取当前页的索引
getNumSlides():获取所有项的个数
slide(index, duration):滑动方法
Swipe使用方法
了解基本函数方法后,我们就来看看使用方法。
首先是HTML结构:
然后是样式代码:.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > figure {
float: left;
width: 100%;
position: relative;
}
最后设置JS绑定以及参数设置:var slider = Swipe(document.getElementById('slider'), {
…………
…………
});
在这里只要把上面介绍的函数参数写在里面,就可以实现相对应的功能。
最后我们也可以给滑动切换添加上下按钮:prev
next
另外我进行一些分页器效果的补充吧:
如果需要分页那个点的效果的话,可以这么添加代码:
nav标签部分就是分页器的相关部分拉,多少个slide就多少个li标签(如果需要分页器效果的童鞋就添加一个nav和ul标签即可,因为代表分页点的li标签需要动态生成,如果你是动态添加的轮播模块!)
对应的实例化代码(有更简化写法的童鞋可以用自己的方法):var slider = Swipe(document.getElementById('slider'), {
auto: 3000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var slides = document.querySelectorAll('.swipe-wrap figure').length;
var liBox = document.getElementById('position');
var liTab;
for (var i = 0; i < slides; i++) {
liTab = document.createElement('li');
if (i == 0) {
liTab.className = 'on';
}
liBox.appendChild(liTab);
};
var bullets = document.getElementById('position').getElementsByTagName('li');
还有个关键的地方,这个插件在手指滑动过一次slide模块后就会stop了,不会再自动轮播,这时候需要到swipe.js里去修改一下源码:
这样这个插件基本就能正常运行满足你最基本的需求了。
相关推荐:
php轮播插件,移动端h5轮播插件swipe实例详解相关推荐
- python 录制web视频_Python django框架 web端视频加密的实例详解
视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端 参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play ...
- Leetcode怎么调试java代码,IDEA2020.1使用LeetCode插件运行并调试本地样例的方法详解...
环境: idea2020.1 插件: LeetCode-editor 6.7 一.IDEA安装LeetCode插件 安装完成重启idea 打开插件 URL可以选择国服和世界服.LoginName和Pa ...
- 《ANSYS Workbench有限元分析实例详解(静力学)》——2.4 ACT插件
本节书摘来自异步社区<ANSYS Workbench有限元分析实例详解(静力学)>一书中的第2章,第2.4节,作者: 周炬 , 苏金英 更多章节内容可以访问云栖社区"异步社区&q ...
- H5的新特性及API详解(很惊人)
H5的新特性及API详解(很惊人) 2017-01-20 17:00 4057人阅读 评论(0) 收藏 举报 分类: h5(11) js函数(64) js技巧(15) 版权声明:本文为博主原创 ...
- 支付宝手机网站支付,app支付,PC端支付流程以及服务端php支付下单,回调流程详解
一.支付宝支付相关文档地址: 支付宝支付相关的文档地址:https://open.alipay.com/api 电脑网站支付:https://opendocs.alipay.com/open/270/ ...
- maven打包插件:maven-compiler-plugin、maven-dependency-plugin、maven-jar-plugin、maven-resources-plugin详解
最近开发的产品,我们是有四五个maven模块,开发阶段一直是在eclipse中运行的,然后快发版的时候,需要把这些项目打成jar包,通过命令去启动,那首先就得把这些模块项目打包,或者拷贝一些资源文件等 ...
- QT中使用C++ socket通信,socket通信原理三次握手和四次握手详解、客户端与服务端实例详解
对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1. 什么是TCP/IP.UDP? 2. Soc ...
- vue-carousel-3d轮播图效果,实例详解,可实现宽度自适应
如图所示,这是一个大屏项目的3d轮播图效果,下面跟着我来详细实现这个轮播效果.官网地址:https://wlada.github.io/vue-carousel-3d/ 如图所示,这是轮子工厂里面的v ...
- 移动端H5单视频播放插件zy.media.js
zyMedia是一款基于HTML5原生multimedia.自定义UI的多媒体播放器. 地址
最新文章
- python 2x list 里面的中文打印效果为unicode 编码 的处理方法
- HTTP长连接服务器端推技术
- 将类别加入到别人的名称空间内
- python使用imbalanced-learn的SVMSMOTE方法进行上采样处理数据不平衡问题
- 中蒙最大陆路口岸2018年运行中欧班列1052列
- linux tracepoint例子,tracepoint介绍
- 云端大数据实战记录-大数据推荐
- 基于DataTabel的增删改查
- 使用Json让Java和C#沟通的方法
- Linux idle基础
- 考勤管理系统c语言,C语言课程设计学生考勤系统最终版(范文1)
- Excel2003怎样拆分单元格
- MySQL 删除大表的性能问题
- java 蓝桥杯算法训练 每月的天数(题解)
- 计算机网络冗余码计算
- php今日头条抓取正文,今日头条文章爬虫采集 - 八爪鱼采集器
- 基于ARM裸机的知识点总结(9)------基于S5PV210的定时器、看门狗和RTC
- 计算机教室云教学反思,《云》音乐教学反思
- HTML5之帆布(canvas)(三)
- Android仿微信朋友圈九宫格图片展示自定义控件,支持缩放动画~