<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手势测试</title>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery.js"></script>
<script src="js/hammer.min.js"></script>
</head>
<body>
<!--手势切换1：左右滑切换图片，检测手势左右方向，来显示当前图片和底部的当前样式-->
<!--整体区域-->
<h2>手势切换1：左右滑切换图片，检测手势左右方向，来显示当前图片和底部的当前样式</h2>
<div class="qy1 swipe">
<!--图片3张-->
<img class="active" src="img/pano-1.jpg">
<img src="img/pano-2.jpg">
<img src="img/pano-3.jpg">
<!--底部按钮-->
<div class="num1">
<span class="active1">1</span>
<span class="">2</span>
<span class="">3</span>
</div>
</div>
<h2>手势切换2：拖拽（可将这张大图看作多个li组合的ul）</h2>
<div class="qy2 pan">
<img src="img/pano-1.jpg">
</div>
<script src="js/index.js"></script>
</body>
</html>
$( function() {
// Swipe
var current = 0;
/*触屏滑动banner*/
(function () {
new Hammer($(".swipe")[0], {
domEvents: true
});
var current = 0;
var imgs = $(".swipe img");
var pages = $(".num1 span");
/*向右无限滑动（4张图片）*/
$(".swipe").on("swipeleft", function (e) {
if (current < 3) {
imgs.removeClass("active");
imgs.eq(++current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}else if(current == 3){
current = -1;
imgs.removeClass("active");
imgs.eq(++current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}
});
/*向左无限滑动*/
$(".swipe").on("swiperight", function (e) {
if (current > 0 ) {
imgs.removeClass("active");
imgs.eq(--current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}else if(current == 0){
current = pages.length;
imgs.removeClass("active");
imgs.eq(--current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}
});
})();
/*自动播放*/
var time = setInterval(free, 3000);
function free(){
var imgs = $(".swipe img");
var pages = $(".num1 span");
current++;
if (imgs[current]) {
imgs.removeClass("active");
imgs.eq(current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}
if(current == pages.length){
current = -1;
}
}
});
$( function() {
// Swipe（左右滑动切换图片：显示当前图片）
(function () {
new Hammer($(".swipe")[0], {
domEvents: true
});
var current = 0;
var imgs = $(".swipe img");
var pages = $(".num1 span");
/*向左左边滑动，index为下个显示 active:display:nane; pages的给当前的焦点样式*/
$(".swipe").on("swipeleft", function (e) {
if (imgs[current + 1]) {
imgs.removeClass("active");
imgs.eq(++current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}
});
/*向左左边滑动，index为上个显示*/
$(".swipe").on("swiperight", function (e) {
if (imgs[current - 1]) {
imgs.removeClass("active");
imgs.eq(--current).addClass("active");
pages.removeClass("active1");
pages.eq(current).addClass("active1");
}
});
})();
// Pan()拖拽
(function() {
var img, margin;
new Hammer( $( ".pan" )[ 0 ], {
domEvents: true
} );
/*开始拖拽时，初始距左边的距离*/
$( ".pan" ).on( "panstart", function( e ) {
img = $( ".pan img" );
margin = parseInt( img.css( "margin-left" ), 10 );
} );
/*拖拽时，鼠标位置*/
$( ".pan" ).on( "pan", function( e ) {
console.log( "pan" );
var delta = margin + e.originalEvent.gesture.deltaX;
/*判断图片不超出可视区域*/
if ( delta >= -991 && delta <= -0 ) {
img.css( {
"margin-left": margin + e.originalEvent.gesture.deltaX
} ).attr( "ondragstart","return false");//禁止图片拖拽
}
} );
})();
});