<script type="text/javascript">
//重要!禁止移动端滑动的默认事件
document.body.addEventListener('touchmove', function (event) {
event = event ? event : window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}, false);
var pages = function (obj) {
var box = document.getElementById(obj.wrap);
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function () {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touch事件绑定
box.addEventListener("touchstart", function (event) {
if (!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
}, false);
box.addEventListener("touchmove", function (event) {
if (!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
}, false);
box.addEventListener("touchend", function (event) {
//位移小于+-50的不翻页
if (moveY < -50) { n++; toPage(n, len); }
if (moveY > 50) { n--; toPage(n, len); }
if(n < 1) { n = 1 }
if(n > len) { n = len }
//toPage(n, len);
}, false);
};
pages({
wrap: 'box', //.box的id
len: 4, //一共有几页
n: 1 //页面一打开默认在第几页?第一页就是0,第二页就是1
});
function toPage(n, len) {
if(n < 1 || n > len) { return; }
console.log("共"+len+"页, "+"当前第"+n+"页");
for (var i = 1; i <= len; i++) {
var pageNum = "page"+i;
var pageSum = document.getElementById(pageNum);
if (i == n) {
pageSum.style.display = "block";
} else {
pageSum.style.display = "none";
}
}
}
</script>
Swiper插件使用:https://www.swiper.com.cn/usage/index.html