function touch(ev){
ev = ev || event
switch (ev.type){
case "touchstart":
// console.log("手指按下")
//手指按下 获取 初始值
startX = box.startX || 0
console.log("我是startX",startX)
//手指按下 获取坐标
sx1 = Math.floor(ev.changedTouches[0].pageX)
sy1 = Math.floor(ev.changedTouches[0].pageY)
box.style.transition = "0s"
break
case "touchmove":
// console.log("手指移动")
mx1 = Math.floor(ev.changedTouches[0].pageX)
move = startX + mx1 - sx1
// console.log(move)
//设置初始值
box.startX = move
//设置box偏移量
box.style.transform = `translateX(${move}px)`
break
case "touchend":
case "touchcancel":
// console.log("手指抬起")
ex1 = Math.floor(ev.changedTouches[0].pageX)
ey1 = Math.floor(ev.changedTouches[0].pageX)
// console.log(box.startX)
var offset = box.startX
// console.log(offset)
//大于0 等于0
offset = Math.min(0,offset)
// console.log(offset)
//小于最大宽度 就等于最大宽度
offset = Math.max(-(aDiv.length -1)*aDiv[0].offsetWidth,offset)
// console.log(offset)
// console.log()
// box.style.transform = `translateX(${})`
var num = Math.round(-offset / aDiv[0].offsetWidth)
console.log(num)
// console.log(aDiv[0].offsetWidth)
box.startX = -num*aDiv[0].offsetWidth
box.style.transition = "0.3s"
box.style.transform = `translateX(${-num*aDiv[0].offsetWidth}px)`
break
}
}
function swiper(options){
// 组件 容器
var box = document.querySelector(options.box)
// 容器 成员
var aLi = document.querySelectorAll(options.aLi)
// 容器的宽度 为 成员个数的 宽度
box.style.width = aLi.length + '00%'
//手指按下
box.addEventListener("touchstart",touch,false)
//手指移动
box.addEventListener("touchmove",touch,false)
//手指抬起
box.addEventListener("touchend",touch,false)
var startX,//初始值
x1,//手指按下的坐标x位置
y1,//手指按下的坐标y位置
ex1,//手指抬起的坐标x位置
ey1,//手指抬起的坐标y位置
x2,//手指移动的x位置
angle,//滑动方向
newX
function touch(ev){
ev = ev || window.event
// console.log(ev.touches.length)
// console.log(ev.changedTouches.length)
// 多指操作时 return
if(ev.touches.length >= 2){
return
}
//阻止冒泡
ev.preventDefault()
//阻止默认事件
ev.stopPropagation()
//判断 event 事件类型
switch (ev.type) {
//手指按下
case 'touchstart':
// 手指按下获取box的初始值位置
startX = cssTransform(box,'translateX')
// 手指按下取消动画时间
box.style.transition = "0s"
//手指按下的x位置
x1 = Math.round(ev.changedTouches[0].pageX)
//手指按下的y位置
y1 = Math.round(ev.changedTouches[0].pageY)
break
// 手指移动
case 'touchmove':
//手指移动的x位置
x2 = Math.round(ev.changedTouches[0].pageX)
//计算新位置
//初始值 加 手指移动x位置 减去 手指按下的x位置
newX = startX + x2 - x1
// 将新位置保存在 box的自定义属性中
cssTransform(box,"translateX",newX)
break
// 手指抬起
case 'touchend':
case 'touchcancel':
//手指抬起时坐标x的值
ex1 = Math.round(ev.changedTouches[0].pageX)
//手指抬起时坐标y的值
ey1 = Math.round(ev.changedTouches[0].pageY)
//获取开始位置和离开位置的距离
nx = ex1-x1
ny = ey1-y1
//通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
angle = Math.atan2(ny, nx) * 180 / Math.PI
//手指抬起 设置 动画时间 传参有值用传参 否则 用默认值
box.style.transition = options.time || "0.3s"
//获取 容器元素box的translateX位置
var offset = cssTransform(box , "translateX")
//通过滑动的角度判断触摸的方向
if(angle<45 && angle>=-45){
// alert('手指离开 右滑动')
offset += 100
// 大于零就等于零 回弹
offset = Math.min(0,offset)
}else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
// alert('手指离开 左滑动')
offset -= 100
// 小于 aLi 的length 减去 1 乘以 aLi的宽度 就等于最大值 回弹
offset = Math.max(-(aLi.length - 1) * aLi[0].offsetWidth , offset )
}
// 四舍五入取整 offset 除以 ali的宽度
var num = Math.round( -offset / aLi[0].offsetWidth )
// var num = Math.round(offset > -(aLi.length - 1) * aLi[0].offsetWidth ?((-offset-100)/aLi[0].offsetWidth):0)
//设置 元素box translateX的值
cssTransform(box , "translateX", -num*aLi[0].offsetWidth)
break
}
}
}
swiper({
box : "
aLi : "
time : "0.3s"
})
//形参 obj ： 要设置样式的元素
//形参 attr ： 要设置的属性名称
//形参 val ： 要设置的属性值
// 传入前两个参数时为 获取元素属性值 传入三个参数时为 设置元素属性值
function cssTransform(obj,attr,val){
//判断obj有没有 transform属性；
//没有则设置
if (!obj.transform) {
obj.transform = {}
}
switch (arguments.length) {
//形参数量为 3 的时候为设置元素属性
case 3:
obj.transform[attr] = val
var str = ''
for (var key in obj.transform){
switch (key) {
case 'translate':
case 'translateX':
case 'translateY':
case 'translateZ':
str += `${key}(${obj.transform[key]}px)`
}
}
obj.style.transform = str
break
//形参数量为 2 的时候为获取元素属性值
case 2:
// 获取
var val = obj.transform[attr]
if (typeof val === "undefined") {
val = 0
}
return val
break
}
}
