您的位置：首页 > 移动开发

移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件

2017-07-11 17:31 871 查看
还记的我上篇文章实现了图片响应式滑动，如果不知道怎样实现图片在超宽屏幕居中显示，且也不知道怎样实现图片的响应式效果（专门针对移动端的），可以再继续看看我写的这篇文章。狠狠地点击这里

那么针对移动端，如何实现手指左滑动右滑动的轮播效果呢，这里我结合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 src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></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滑
相关文章推荐
新的分享
章节导航