移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
Posted 代码笔记本
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件相关的知识，希望对你有一定的参考价值。
力 彑
夂 小
针对移动端，如何实现手指左滑动右滑动的轮播效果呢，这里我结合bootstrap框架给大家做一个简单的demo，分享一下。
首先看看bootstrap中carousel的实现方式，
.carousel('prev') 滑动上一张 Cycles to the previous item. .carousel('next')滑动下一张 Cycles to the next item.
那么如何实现手指触摸，轮播图中的图片上一张下一张的显示呢？
简单的总结一下思路：
获取轮播图的容器，（因为之后触摸轮播图容器所在位置才能实现图片的左滑动右滑动的效果，其他位置无效）；
给轮播图的容器注册touch事件，获得手指一开始触摸的X坐标，以及手指离开屏幕一瞬间的X坐标；（实现方式js代码中有注解，请自行查看）
判断手指滑动的方向，来决定究竟是哪一张图片该显示。
具体代码实现：
html代码（这都是bootstrap给封装好的代码。我只是修改了一下id而已）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>移动端轮播图手指的左右滑动</title> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="css/main.css"> <!--[if lt IE 9]> <script ></script> <script ></script> <![endif]--></head><body><div class="container"> <div id="main_ad" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#main_ad" data-slide-to="0" class="active"></li> <li data-target="#main_ad" data-slide-to="1"></li> <li data-target="#main_ad" data-slide-to="2"></li> <li data-target="#main_ad" data-slide-to="3"></li> <li data-target="#main_ad" data-slide-to="4"></li> <li data-target="#main_ad" data-slide-to="5"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/l1.jpg" alt="..."> </div> <div class="item"> <img src="images/l2.jpg" alt="..."> </div> <div class="item"> <img src="images/l3.jpg" alt="..."> </div> <div class="item"> <img src="images/l4.jpg" alt="..."> </div> <div class="item"> <img src="images/l5.jpg" alt="..."> </div> <div class="item"> <img src="images/l6.jpg" alt="..."> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#main_ad" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div></div><script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script></body></html>
js代码，希望能认真看看，想想为什么记录最后手指离开的位置不用touchend事件而是touchmove事件。（原因是touchend事件说明touch事件已经结束了，就无法记录手指离开屏幕一瞬间的x坐标位置了。采用touchmove事件重复给X坐标进行赋值，这样手指离开屏幕一瞬间的X坐标也能得到啦）
提示：
给carousel注册touch事件时，我们需要获得其touches属性，你可以打印一下事件，查看
$carousels.on('touchstart',function (e) { console.log(e);
});
js代码（用jquery实现的）
/** * Created by Administrator on 2017/7/11. */'use strict'; $(function () { // 获取手指在轮播图元素上的一个滑动方向（左右） // 获取界面上轮播图容器 var $carousels = $('.carousel');
var startX,endX; // 在滑动的一定范围内，才切换图片 var offset = 50; // 注册滑动事件 $carousels.on('touchstart',function (e) { // 手指触摸开始时记录一下手指所在的坐标x startX = e.originalEvent.touches[0].clientX; }); $carousels.on('touchmove',function (e) { // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值 endX = e.originalEvent.touches[0].clientX; }); $carousels.on('touchend',function (e) { //console.log(endX); //结束触摸一瞬间记录手指最后所在坐标x的位置 endX //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化 var distance = Math.abs(startX - endX);
if (distance > offset){ //说明有方向的变化 //根据获得的方向 判断是上一张还是下一张出现 $(this).carousel(startX >endX ? 'next':'prev'); } }) });好了，这样就成功实现了手指实现轮播图左滑动右滑动的效果啦！
代码笔记本
每天记录学习历程
以上是关于移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件的主要内容，如果未能解决你的问题，请参考以下文章