js原生实现移动端手指滑动轮播图效果
2019-05-16 本文已影响2人
贤总_
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="content" id="bootPage">
<div class="wrapOne" id="wrapOne">
<ul class="boxOne" id="boxOne">
<li>
<div class="box1 box2"><img class="imgPath" src="../../image/one.png"></div>
</li>
<li>
<div class="box1 box3"><img class="imgPath" src="../../image/two.png"></div>
</li>
<li>
<div class="box1 box4"><img class="imgPath" src="../../image/three.png"></div>
</li>
<li>
<div class="box1 box5">
<img class="imgPath" src="../../image/four.png">
<div class="entry">进入老板助手</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
<script src="./index.js"></script>
css部分（使用了less）
*,
::before,
::after {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
/*兼容移动端主流浏览器*/
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
/*清除移动端点击高亮效果*/
}
/*清除浮动*/
.clearfix::before,
.clearfix::after {
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.content {
width: 100%;
// height: 100%;
margin: 0;
overflow: hidden;
.wrapOne {
position: relative;
overflow: hidden;
}
.wrapTwo {
position: relative;
overflow: hidden;
}
.wrapThree {
position: relative;
overflow: hidden;
}
.wrapFour {
position: relative;
overflow: hidden;
}
.boxOne {
position: absolute;
list-style: none;
left: 0;
top: 0;
padding: 0;
margin: 0;
}
.boxTwo {
position: absolute;
list-style: none;
left: 0;
top: 0;
padding: 0;
margin: 0;
}
.boxThree {
position: absolute;
list-style: none;
left: 0;
top: 0;
padding: 0;
margin: 0;
}
.boxFour {
position: absolute;
list-style: none;
left: 0;
top: 0;
padding: 0;
margin: 0;
}
li {
float: left;
}
// .box1 {
// .px2rem(1950);
// height: @px2rem;
// }
.box5 {
position: relative;
}
.entry {
.px2rem(300);
width: @px2rem;
border: 1px solid rgba(182, 192, 201, 1);
font-family: SourceHanSansCN-ExtraLight;
// font-weight: bold;
color: rgba(182, 192, 201, 1);
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.entry {
.px2rem(108);
height: @px2rem;
line-height: @px2rem;
}
.entry {
.px2rem(40);
font-size: @px2rem;
}
.entry {
.px2rem(20);
border-radius: @px2rem;
}
.entry {
top: 88%;
}
js部分
window.onload=function(){
var aLi = document.querySelectorAll(".boxOne li");
var boxOne = document.querySelector('.boxOne');
var wrap = document.querySelector('.wrapOne');
// var aLiWidth = boxOne.offsetWidth;
var viewHeight = document.documentElement.clientHeight;
var viewWidth = document.documentElement.clientWidth;
console.log('屏幕高度', viewHeight)
console.log('屏幕宽度', viewWidth)
var aLiWidth = viewWidth;
console.log('aLiWidth: ' + aLiWidth)
wrap.style.height = viewHeight + 'px';
// 设置盒子的宽度
boxOne.style.width = aLi.length * 100 + '%';
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.width = 1 / aLi.length * 100 + '%';
};
// 初始化手指坐标点
var startPoint = 0;
var startEle = 0;
var disX = 0;
//手指按下
wrap.addEventListener("touchstart", function (e) {
startPoint = e.changedTouches[0].pageX;
// console.log(startPoint);
startEle = boxOne.offsetLeft;
// console.log(startEle)
});
//手指滑动
wrap.addEventListener("touchmove", function (e) {
var currPoint = e.changedTouches[0].pageX;
disX = currPoint - startPoint;
if (Math.abs(disX) > 30 && Math.abs(disX) < 150) {
// console.log('滑动距离', Math.abs(disX), disX)
if (disX > 0) {
disX = disX + 150
} else if (disX < 0) {
disX = disX - 150
}
var left = startEle + disX;
// console.log(left)
boxOne.style.left = left + 'px';
}
});
//当手指抬起的时候，判断图片滚动离左右的距离，当
wrap.addEventListener("touchend", function (e) {
var left = boxOne.offsetLeft;
// 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
var currNum = Math.round(-left / aLiWidth);
currNum = currNum >= (aLi.length - 1) ? aLi.length - 1 : currNum;
currNum = currNum <= 0 ? 0 : currNum;
boxOne.style.left = -currNum * wrap.offsetWidth + 'px';
})
}
参考：https://blog.csdn.net/weixin_42805130/article/details/81870160
