轮播移动端 html,移动端h5如何使用轮播插件swipe
移动端h5如何使用轮播插件swipe
发布时间:2020-07-16 15:36:34
来源:亿速云
阅读:100
作者:Leah
本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
swipe.js是一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。
在移动端的h6页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐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里去修改一下源码:
这样这个插件基本就能正常运行满足你最基本的需求了。
上述内容就是移动端h5如何使用轮播插件swipe,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
轮播移动端 html,移动端h5如何使用轮播插件swipe相关推荐
- 关于如何将轮播图在移动端和pc端自适应的操作
我用的bootstrap框架做的,轮播图代码用的bootstrap上的. 如何做到pc端和移动端兼容,关键在于一张图片需要2份,一份大的图,一份小的图,通过屏幕宽度的改变,来确定展示大图片还是小图片. ...
- pc端html轮播带滑块,swiper.js简单快速实现轮播滑动(兼容PC端、移动端)
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端 移动端(在浏览器将设备切换为手机,这里 ...
- 苹果CMSV10高端安全干净模板宽屏大图轮播支持DIY的自适应模板
苹果CMSV10高端安全干净模板宽屏大图轮播支持DIY的自适应模板 首页幻灯片数据为5星推荐全部分类8个(必须8个),图片链接填写格式"http://xxx.com/xxx.jpg) #0D ...
- 数据如何指导决策:优酷主客APP播转率的C端优化
一.背景介绍 1. 了解「播转率」及相关业务 优酷是一个综合视频平台,用户到访优酷是为了观看视频.对于平台来说,希望到访的用户都能找到自己想看的内容,收获满意的用户体验,达成后续的留存与持续活跃. & ...
- 移动端开发——APP端上H5容器化建设
1. 背景 当前移动端和前端的结合愈加紧密,尤其是在偏重活动运营的电商App中,受制于App版本审核,具备研发成本低.可灵活发布等特点的H5页面受到青睐,使其在APP端上承接了越来越多的业务.然而H5 ...
- EasyNVR网页摄像机直播方案H5前端构建之:如何区分PC端和移动端
背景分析 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看.可控的诉求越来越多,尤其是移动应用技术和前端技术的 ...
- 【移动端h5常用的几款插件 】
移动端h5常用的几款插件 1.拖拽排序插件--Sortable.js 演示地址:https://www.jq22.com/yanshi10850 2.日期选择插件--rolldate.js 演示地址: ...
- 无需编程,我教你打造H5页面图片轮播效果
图片轮播是手机App和手机网页上常见的功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.现在,H5页面和App上也可以加入图片轮播功能了,希望这个图片轮播效果能够给你 ...
- ThinkPHP 5.1商城系统,电脑端+手机H5+微商城+小程序+买家端APP+卖家端APP+源码IM客服系统+线下收银系统
ThinkPHP 5.1商城系统,电脑端+手机H5+微商城+小程序+买家端APP+卖家端APP+源码IM客服系统+线下收银系统,UI细腻,是个不错的选择.
最新文章
- 【C++】45.尽量不要在构造函数中调用函数或开启线程
- 有关logistic(sigmoid)函数回归
- centos 7 安装 google chrome 浏览器 (不是教程,只是为了以后自己可能用到)
- mysql内置的变量,MySQL服务器模式及相关内置变量
- 学好Python爬取京东知乎价值数据
- 【C++】为什么INT_MIN不是直接写成-2147483648(转载)
- 阿里云asp主机 后台登录一直提示验证码错误_拖欠阿里云一分钱,结果?
- node文件服务器,nodejs一个简单的文件服务器的创建方法
- iOS图形学(四):iOS中的绘图框架
- 简单的html登录页面
- Python数据可视化——坐标轴基础
- adb server is out of date. killing... 解决方案
- 『原创』老范的来电防火墙v1.0发布了(图文)
- Ink脚本语言学习笔记(小结)
- 2022-2028全球超声波封管机行业调研及趋势分析报告
- 10. JavaScript
- Abp 项目生成数据到数据库
- 谈谈深度学习中的 Batch_Size Batch_Size(批尺寸)是机器学习中一个重要参数,涉及诸多矛盾,下面逐一展开。 首先,为什么需要有 Batch_Size 这个参数? Batch 的选
- TOUGH2系列建模方法及在CO2地质封存、水文地球化学、地热、地下水污染等领域中的实践技术
- 论文笔记(十二):Particle Filter Networks: End-to-End Probabilistic Localization From Visual Observations
热门文章
- Maya Mental Ray焦散效果
- 《高效能人士的七个习惯》读书摘记
- vue循环后不能下滑_Vue 循环后的数据更改无法响应。
- 复旦大学2020计算机考试大纲,复旦大学2020年硕士研究生招生考试自命题科目考试大纲-761卫生综合(一)大纲...
- 鸿蒙无法使用安卓应用市场,关于华为鸿蒙兼容安卓应用的原因与思考
- 基于Python的阴阳师后台全平台辅助
- 【附源码】计算机毕业设计JAVA销售人员绩效管理系统
- Linux Cgroup cpu子系统实验
- 新的研究评估Masimo ORi™反映中度高氧期间氧合状况的功能
- hashMap1.7头插法及扩容