使用hammer.js实现移动端手指滑动切换轮播图教程

于 2022-05-13 19:16:31 发布
阅读量1k 收藏 2
点赞数
分类专栏： # bootstrap 文章标签： 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joye_7y/article/details/124758081
版权

今天面试前端开发时，要求在移动端实现手指滑动切换轮播图

这里我用到 bootsrap 的轮播图组件 + hammer.js 库

文章参考： Hammer.js - 李林峰的园子 - 博客园 (cnblogs.com)

在 hammer.js 中

Swipe事件：在指定的 Dom 区域内，一个手指快速在触屏上滑动。即我们平时用到最多的滑动事件。

Swipeleft：向左滑动
Swiperight：向右滑动
Swipeup：向上滑动
Swipedown：向下滑动

演示效果：

手指滑动切换轮播图演示

代码如下：改动的地方我都标了注释，根据自己需求改写即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<!-- jquery -->
		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
			crossorigin="anonymous"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
			crossorigin="anonymous"></script>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<!-- bootstrap官方轮播图代码 -->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner" role="listbox">
				<!-- 图片地址改成你自己的就可以了 -->
				<div class="item active">
					<img src="./images/banner1.jpg" alt="...">
				</div>
				<div class="item">
					<img src="./images/banner2.jpg" alt="...">
				</div>
				<div class="item">
					<img src="./images/banner3.jpg" alt="...">
				</div>
			</div>
		
			<!-- 给两侧切换轮播图的a标签加了id -->
			<a id="leftbtn" class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a id="rightbtn" class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
			</a>
		</div>

		<!-- hammer.js -->
		<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
		<script type="text/javascript">
			// 创建一个新的hammer对象并且在初始化时指定要处理的dom元素
			// 通过id获取到装轮播图的容器
			var hammertime = new Hammer(document.getElementById("carousel-example-generic"));
			//添加左滑动事件
			hammertime.on("swipeleft", function (e) {
				// 自动触发左侧按钮
				document.getElementById('leftbtn').click();
			})
			//添加右滑动事件
			hammertime.on("swiperight", function (e) {
				// 自动触发右侧按钮
				document.getElementById('rightbtn').click();
			})
		</script>
	</body>
</html>
@Kacie
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机端轮播图（焦点图）和hammer.js教程
01-18
通过以上步骤，我们可以构建一个功能齐全且具有良好交互性的手机端轮播图，并结合Hammer.js实现手势控制，使用户在移动设备上更加自如地浏览和探索内容。同时，为了保证性能和加载速度，我们还需要关注代码的优化，...
html5手机触摸滑动图片幻灯片轮播切换代码.zip
07-11
对于手机触摸事件的支持，HTML5提供了`touchstart`、`touchmove`和`touchend`等事件，使得开发者可以监听用户的触摸操作，从而实现滑动切换的效果。 接着，JavaScript在这其中扮演了关键角色。通过监听上述的触摸...
php滑动轮播效果,js实现移动端手指滑动轮播图效果
weixin_32312081的博客
03-11 145
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。如下所示：Documenthtml{height:100%;}body{width: 100%;height:100%;margin:0;overflow: hidden;}.wrap{position: relative;overflow: hidd...
原生js实现移动端轮播图滑动切换
weixin_39976512的博客
10-31 4408
移动端手势 轮播图分析 自动轮播且无缝 [定时器、过渡动画] 分页器要随着图片的轮播而改变 [根据索引切换] 滑动效果 [touch事件] 图片随着分页器变化 滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡] 滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]] html页面结构 &lt;!--轮播图--&gt; &lt;...
移动WEB-使用hammer.js实现滑动门（carousel ）
weixin_30642869的博客
04-11 145
1.首先需要引入jQuery文件和hammerJS的插件： http://www.bootcdn.cn/jquery/ 2.文档结构设计 <div id="carousel"> <ul> <li class="panel1"> <h2>左滑下一页&l...
原生js实现轮播图功能，支持点击和手机端滑动切换图片
weixin_30733003的博客
05-25 2208
轮播图的实现原理并不难，但是步骤有些繁琐。最近练习了一个轮播图，大部分是跟着网上的教程写的，然后自己做了一点兼容ie8的修改，加了点击切换图片的特效和手机端的滑动特效，让这个轮播图可以在响应式的网站中使用，同时兼容pc端和触屏端。 轮播图的样式也分很多种，淡入淡出的轮播图很容易实现，只需要把图片全都叠在一起，让相应的图片轮流显示就行了，但是滚动能的轮播图就要复杂很多。这里介绍的是滚动的轮播图： ...
H5 CSS3实现手指滑动切换图片
qq_29069777的博客
10-23 924
包含3个文件：html、slider-H5.js、jquery.js(自行下载)。在html中可配置滑动参数。具体代码如下： HTML代码： <!DOCTYPE HTML> <html> <hea...
jQuery响应式移动端轮播图特效
04-07
jQuery Mobile或者Hammer.js等库可以检测触摸事件，使用户可以通过手指滑动来切换轮播图。这些库通常会处理复杂的触摸手势，如滑动、捏合等，使得在触屏设备上的交互更为自然流畅。 实现这样一个轮播图特效，我们...
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
10-17
- 添加手势识别库如`Hammer.js`，以支持触摸设备上的滑动手势。 总结起来，在Vue.js中实现这样的功能，需要对组件化开发、数据绑定、事件处理、状态管理、文件操作以及CSS样式和JavaScript动画有深入的理解。通过...
让bootstrap的carousel支持滑动滚屏的实现代码
08-28
这样，当用户在触摸设备上滑动 Carousel 区域时，就可以实现平滑的滑动切换效果，增强了移动设备上的用户体验。 在实际应用中，你可能还需要考虑一些其他因素，例如处理滚动事件的边界条件，防止用户在最后一张或第...
html 轮播_js如何实现移动端Touch轮播图？（代码示例）
weixin_39619270的博客
12-01 567
本篇文章给大家带来的内容是介绍js实现移动端Touch轮播图的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Touch 轮播图touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。1. html 结构结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点：2. 样式初始化html的一些标签，都会有一些默认样式，比如body标签默...
前端js——轮播图、图片定时切换模板（图片滚动）
qq_41141657的博客
02-26 2494
1.html &amp;lt;img src=&quot;../HTML/img/img_1.jpg&quot; id=&quot;change&quot;/&amp;gt; 2.js 1）获取id var change=document.getElementById('change'); 2）定义一个计数变量 var i=1; 3）设置定时器,2秒切换一下图片 setInterval(function(){},200) setInter...
移动端手势库hammerJS 2.0.4官方文档翻译
dcof99817的博客
01-29 705
hammerJS是一个优秀的、轻量级的触屏设备手势库，现在已经更新到2.04版本，跟1.0版本有点天壤地别了，毕竟改写了事件名并新增了许多方法，允许同时监听多个手势、自定义识别器，也可以识别滑动方向。 不过对于新版本的hammerJS却及其匮乏中文指引文档，就着这一点我还是上官网翻译下英文文档，写一篇跟大家分享吧（其实hammer的API写的很不怎样，内容和排版都很马虎了事，建议先仔细...
hammer.js自定义vue指令的简单例子
阿友的专栏
11-20 3809
因为vue没有触摸事件的指令所以自己写一个简单的例子 function vueTouch(el,type,binding){ this.el = el; this.type = type; this.binding = binding; var hammertime = new Hammer(this.el);
hammerjs jquery的选项使用方法，以给swipe设置threshold和velocity为例
weixin_30401605的博客
11-17 335
先包含hammer.min.js和 jquery.hammer.js，然后： var $ele = $('#ele'); //复用jquerydom对象，建个变量 $ele.hammer().on("swipeleft", swipeLeftHandler).on("swiperight", swipeRightHandler); //添加左划右划事件 //设置选项 $ele.da...
移动开发框架剖析(一) Hammer专业的手势控制
baoaoba9317的博客
10-14 301
一直在写jQuery的源码教程，都没时间研究别的框架了。Hammer是我项目御用的一个手势库，早期1.x版本的swipe事件的响应不灵敏的问题而改过源码，2.x就已经更正过来，而且源码的结构也整个翻新了一遍，不管从逻辑还是组织结构上，我个人都觉得有必要深入，所以就当作一个系列教程一起学习吧。 本章主要讲解下使用，因为官方的API都是英文的，中文资料也相对较少，源码的分析后续再更新。 ...
移动端手势事件 hammer.JS插件
webxiaoma
06-16 9113
今天我总结一下我以前用的一个移动端手势的插件 HAMMER.JS插件，很好用，而且提供的手势也很多。它没有任何依赖性，它很小，只有7.34 kB最小化+ gzip压缩！我只是简单的总结了一下他的用法，详细使用请访问官网一、引入hammer.JS1.下载地址：http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址：http://hammerj
Hammer.js手势库 安卓4.0.4上的问题
baoaoba9317的博客
03-08 131
Hammer.JS - v1.0.7dev - 2014-02-18 1.Hammer.JS 在安卓4.0.4 , 4.1上 touchmove事件丢失 https://code.google.com/p/chromium/issues/detail?id=152913 2.swipe, swipeleft, swiperight, swipeup, swipedown事...
移动端JQ插件hammer使用详解
webscript的博客
09-29 3570
**移动端JQ插件hammer使用详解** 用法： 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样，在后面加上hammer就可以了 var hammertime = $('.tabsa').hammer(); 3,可以直接用on直接添加事件 hammertime.on(‘tap’, function(ev) {}) 这
vue2使用hammer.js实现移动端div拖拽放大缩小旋转
最新发布
09-08
在Vue2中使用Hammer.js实现移动端div的拖拽、放大缩小和旋转可以按照以下步骤进行。 首先，在Vue项目中安装Hammer.js。 ``` npm install hammerjs ``` 然后，在需要使用拖拽、放大缩小和旋转功能的组件中引入Hammer.js，并初始化一个Hammer实例，将其绑定到要拖拽、放大缩小和旋转的div元素上。 ``` import Hammer from 'hammerjs' export default { mounted() { const element = this.$refs.element // 获取div元素的引用 const mc = new Hammer.Manager(element) // 初始化Hammer实例并将其绑定到div元素上 // 添加拖拽、放大缩小和旋转的手势识别 mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })) mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan')) mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan')) // 初始化div元素的拖拽、放大缩小和旋转的初始状态值 let posX = 0 let posY = 0 let scale = 1 let lastScale = 1 let rotation = 0 // 监听拖拽事件 mc.on('pan', (e) => { // 实现拖拽 posX = e.deltaX posY = e.deltaY element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听放大缩小事件 mc.on('pinch', (e) => { // 实现放大缩小 scale = lastScale * e.scale element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听旋转事件 mc.on('rotate', (e) => { // 实现旋转 rotation = e.rotation element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) } } ``` 最后，在该组件的模板中添加一个div元素，并给其添加初始样式。 ``` <template> <div ref="element" style="width: 200px; height: 200px; background-color: red;"></div> </template> ``` 这样，当你在移动端上访问这个页面时，就可以拖拽、放大缩小和旋转这个div元素了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值