使用bootstrap实现轮播图的触屏函数
来源:互联网 发布:c语言入门自学书籍推荐 编辑:程序博客网 时间:2024/05/21 10:41
Bootstrap 是css框架,其中为我们提供了响应式轮播图方法但是并没有为我们提供触屏滑动轮播图的功能,所以需要我们自己封装
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
以下是实现触屏轮播图的实现 适用于所有用bootstrap制作的轮播图
function banner () { var carousel = document.querySelector('.carousel'); var startX=0; var moveX=0; var distance=0; //绑定触屏事件 carousel.addEventListener('touchstart',function(e){ //记录触屏开始的数据 startX= e.targetTouches[0].clientX; }) carousel.addEventListener('touchmove',function(e){ //记录触屏开始的数据 moveX= e.targetTouches[0].clientX; distance = moveX-startX; }) //绑定触屏结束事件 carousel.addEventListener('touchend',function(e){ if(distance>0){ $(this).carousel('prev'); } if(distance<0){ $(this).carousel('next'); } //数据重置 startX=0; moveX=0; distance=0; })}
Bootstrap 框架中的 carousel 插件给使用者提供了几种特殊的调用方法,简单说明如下:
.carousel(“cycle”):从左向右循环播放;
.carousel(“pause”):停止循环播放;
.carousel(“number”):循环到指定的帧,下标从0开始,类似数组; .carousel(“prev”):返回到上一帧;
.carousel(“next”):下一帧
- 使用bootstrap实现轮播图的触屏函数
- 使用jdGrid和Bootstrap实现的分页
- bootstrap下实现轮播图的响应式
- bootstrap table的实现
- 使用 Vue.js 结合bootstrap 实现的分页控件
- SpringMVC实现多文件上传+bootstrap fileinput的使用
- 使用Bootstrap-table实现ssm框架的分页Demo
- springmvc用bootstrap实现登陆+拦截器的使用
- 使用mui和bootstrap实现简单的进度条
- 使用Bootstrap和Vue实现用户信息的编辑
- djngo快速实现--使用Bootstrap
- djngo快速实现--使用Bootstrap
- 使用bootstrap实现标签切换
- bootstrap-sass的使用
- Bootstrap的使用体会
- bootstrap的使用
- bootstrap的使用
- bootstrap-datetimepicker 的使用
- Codeforces 762A-k-th divisor
- Codeforces 487C 数论+构造
- 点击隐藏Div代码
- awk处理跨行(多行)记录的文件
- HRBUST2381:MOD(二分)
- 使用bootstrap实现轮播图的触屏函数
- php扩展vld的安装
- Activity启动模式图文详解:standard, singleTop, singleTask 以及 singleInstance
- stl中list容器的嵌套
- 【Python】学习笔记——-Python2 和 Python3的区别
- UVA1595(对称轴)
- 1063. Set Similarity (25) PAT甲级
- 2016拜拜,2017我来
- opencv-python cv2接口下错误TypeError: mat data type=18 is not supported