怎样实现H5+CSS3手指滑动切换图片的示例代码

2020-04-21 22:51:07易采站长站整理

} },
move: function(point_x, point_y) { //滑动屏幕处理函数
var changeX = point_x - (this.point_x === null ? point_x: this.point_x),
changeY = point_y - (this.point_y === null ? point_y: this.point_y),
marginleft = this.now_left,
return_value = false,
sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY);
this.now_left = marginleft + changeX;
this.move_left = changeX < 0;
if (sin > Math.sin(Math.PI / 3) || sin < -Math.sin(Math.PI / 3)) { //滑动屏幕角度范围:PI/3 -- 2PI/3
return_value = true; //不阻止默认行为
}
this.point_x = point_x;
this.point_y = point_y;
this.box.css(this.get_style(2));
return return_value;
},
move_end: function() {
var changeX = this.now_left % this.width,
ind;
if (this.now_left < this.minleft) { //手指向左滑动
ind = this.index + 1;
} else if (this.now_left > this.maxleft) { //手指向右滑动
ind = this.index - 1;
} else if (changeX != 0) {
if (this.move_left) { //手指向左滑动
ind = this.index + 1;
} else { //手指向右滑动
ind = this.index - 1;
}
} else {
ind = this.index;
}
this.point_x = this.point_y = null;
this.go_index(ind);
},
/*
获取动画样式,要兼容更多浏览器,可以扩展该方法
@int fig : 1 动画 2 没动画
*/
get_style: function(fig) {
var x = this.now_left,
time = fig == 1 ? this.scroll_time: 0;
return {
'-webkit-transition': '-webkit-transform ' + time + 'ms',
'-webkit-transform': 'translate3d(' + x + 'px,0,0)',
'-webkit-backface-visibility': 'hidden',
'transition': 'transform ' + time + 'ms',
'transform': 'translate3d(' + x + 'px,0,0)'
};
}

});
/*
这里对外提供调用接口,对外提供接口方法
next :下一页
prev :上一页
go :滚动到指定页
*/
$.mggScrollImg = function(box, config) {
var scrollImg = new mggScrollImg(box, config);
return { //对外提供接口
next: function() {
scrollImg.next();
},
prev: function() {
scrollImg.prev();
},
go: function(ind) {
scrollImg.go_index(parseInt(ind) || 0);
}
}
}
})(jQuery)