<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>jQuery支持触摸事件的轮播图</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/jquery.hiSlider.min.css">
<script src="js/jquery.1.9.1.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script>
$(function() { //首页轮播图
$('.hiSlider3').hiSlider({
isFlexible: true,
isSupportTouch: true,
titleAttr: function(curIdx) {
return $('img', this).attr('alt');
}
});
});
$(function() {
var i = 0;
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test1"));
//添加事件
hammertime.on("tap", function(e) {
document.getElementById("result1").innerHTML = "点击触发第" + (i++) + "次,长按无效";
//控制台输出
console.log(e);
});
});
$(function() {
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test2"));
//添加事件
hammertime.on("swipeleft", function(e) {
document.getElementById("result2").innerHTML = "向左滑动: X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制台输出
console.log(e);
});
hammertime.on("swiperight", function(e) {
document.getElementById("result2").innerHTML = "向右滑动: X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制台输出
console.log(e);
});
//垂直方向默认是关闭的,swipeup,swipedown默认不能用,需手动打开，可能会影响左右滑动
// hammertime.get('swipe').set({
// direction: Hammer.DIRECTION_VERTICAL
// });
hammertime.on("swipeup", function(e) {
document.getElementById("result2").innerHTML = "向上滑动: X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制台输出
console.log(e);
});
hammertime.on("swipedown", function(e) {
document.getElementById("result2").innerHTML = "向下滑动: X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制台输出
console.log(e);
});
});
$(function() {
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test3"));
//添加事件
hammertime.on("pan", function(e) {
document.getElementById("result3").innerHTML = "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制台输出
console.log(e);
});
});
$(function() {
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test4"));
//为该dom元素指定触屏移动事件
hammertime.add(new Hammer.Pinch());
//添加事件
hammertime.on("pinchin", function(e) {
document.getElementById("result4").innerHTML = "两手指越来越近<br />";
//控制台输出
console.log(e);
});
hammertime.on("pinchout", function(e) {
document.getElementById("result4").innerHTML = "两手指越来越远<br />";
//控制台输出
console.log(e);
});
});
$(function() {
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test5"));
//添加事件
var i = 0;
hammertime.on("press", function(e) {
document.getElementById("result5").innerHTML = "第" + (i++) + "次按压超过500ms了<br />";
//控制台输出
console.log(e);
});
});
$(function() {
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("test6"));
//为该dom元素指定触屏移动事件
hammertime.add(new Hammer.Rotate());
//添加事件
hammertime.on("rotate", function(e) {
document.getElementById("result6").innerHTML = "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
//控制台输出
console.log(e);
});
})
</script>
<style type="text/css">
body,
html,
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font: 14px/2 'Microsoft YaHei', 'Arial';
}
h2 {
text-align: center;
color: red;
}
li {
list-style: none;
}
li img {
display: block;
margin: 0 auto;
}
#main {
padding: 1px;
/*min-width: 400px;*/
margin: 0px;
background: #fefefe;
}
.hiSlider {
overflow: hidden;
height: 280px;
margin: 0px;
background: #eee;
}
.hiSlider-item {
float: left;
}
/*hiSlider.js教程*/
.test {
width: 100%;
height: 150px;
background: blue;
text-align: left;
}
.result {
width: 100%;
height: 150px;
background: green;
text-align: left;
overflow: hidden;
}
</style>
</head>
<body>
<div id="main">
<h2>jQuery支持移动端轮播图</h2>
<ul class="hiSlider hiSlider3">
<li class="hiSlider-item"><img src="images/1.jpg" alt="我是第1幅图"></li>
<li class="hiSlider-item"><img src="images/2.jpg" alt="我是第2幅图"></li>
<li class="hiSlider-item"><img src="images/3.jpg" alt="我是第3幅图"></li>
<li class="hiSlider-item"><img src="images/4.jpg" alt="我是第4幅图"></li>
<li class="hiSlider-item"><img src="images/5.jpg" alt="我是第5幅图"></li>
</ul>
<h2>hammer.js教程1:tap事件(点击事件)</h2>
<div>
<div id="test1" class="test">事件区域</div>
<div id="result1" class="result">事件结果</div>
</div>
<h2>hammer.js教程2:swipe事件(滑动事件)</h2>
<div>
<div id="test2" class="test">事件区域</div>
<div id="result2" class="result">事件结果</div>
</div>
<h2>hammer.js教程3:pan事件(拖动事件)</h2>
<div>
<div id="test3" class="test">事件区域</div>
<div id="result3" class="result">事件结果</div>
</div>
<h2>hammer.js教程4:pinch事件(多点触控事件)</h2>
<div>
<div id="test4" class="test">事件区域</div>
<div id="result4" class="result">事件结果</div>
</div>
<h2>hammer.js教程5:press事件(按压事件)</h2>
<div>
<div id="test5" class="test">事件区域</div>
<div id="result5" class="result">事件结果</div>
</div>
<h2>hammer.js教程6:rotate事件(旋转事件)</h2>
<div>
<div id="test6" class="test">事件区域</div>
<div id="result6" class="result">事件结果</div>
</div>
</div>
</body>
</html>
手机端轮播图（焦点图）和hammer.js教程.zip （21个子文件） 
手机端轮播图（焦点图）和hammer.js教程 css 
jquery.hiSlider.css 1KB normalize.css 2KB default.css 5KB jquery.hiSlider.min.css 886B .project 967B fonts icomoon.woff 1KB icomoon.eot 2KB
icomoon.svg 2KB icomoon.ttf 1KB
hammer.js教程.html 7KB images 
5.jpg 97KB 3.jpg 158KB 4.jpg 84KB
hislider-arrow.png 3KB 2.jpg 221KB 1.jpg 220KB 支持移动端和PC端的轻量级轮播图插件.html 4KB js jquery.1.9.1.js 262KB hammer.js 62KB jquery.hiSlider.js 15KB jquery.hiSlider.min.js 7KB资源评论
最骚的就是你
- 粉丝: 1090
- 资源: 193
最新资源
- springboot校园管理系统的设计与实现
- RV1126 核心板资料
- springboot基于SpringBoot的旅游网站的设计与实现
- MATLAB实现智能水滴算法(Intelligent Water Drops Algorithm, IWDA)
- 2023-04-06-项目笔记 - 第三百零八阶段 - 4.4.2.306全局变量的作用域-306 -2025.11.05
- 2024年硕士计量经济学作业1-空白.ipynb
- 【完整源码+数据库】 SpringBoot Metrics 监控系统完整源码分享给需要的同学
- Carla 0.9.15编译的zlib-1.2.13.zip
- 【源码+数据库】基于springboot+mysql实现的校园二手市场平台
- Carla 0.9.15编译的xerces-c-3.23-src
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
