<script src="js/touch.js"></script>
<script>
// 最外层的盒子
var wrap = document.getElementsByClassName('wrap')[0]
var ospan = document.getElementsByTagName('span')
// 获取元素
var oul = document.getElementsByClassName("list")[0]
// 获取一张图片的宽度
var imgW = document.documentElement.clientWidth;
console.log(imgW);
// 复制一份ul的所有子元素 做无缝轮播
oul.innerHTML += oul.innerHTML
// 获取li的个数包括复制的
var len = oul.getElementsByTagName('li').length
console.log(len);
// 设置ul的宽度
oul.style.width = len * imgW + 'px'
// console.log(len-1);
var count = 0;//当前图片的下标
var listLeft = 0;//当前ul的left值
// 拖动开始
// 1、取得list的left值，给count赋值
// 2、判断当前按下的是第几张图，如果第一张图，拉到下标为3的这张图。如果为最后一张，拉到下标为2的这张图
touch.on(oul, 'dragstart', function (ev) {
oul.style.transition = 'none'; // 按下时，清除运动 只有拖动时才开启运动
console.log(ev);
listLeft = oul.offsetLeft //取oul的left值
count = Math.abs(listLeft / imgW); // 返回的是0或者一个负数，abs取绝对值
if (count == 0) { //如果第一张图，拉到下标为3的这张图
count = ospan.length;
// console.log(count);
oul.style.left = -count * imgW + 'px';
listLeft = oul.offsetLeft;
}
if (count == len - 1) {//如果为最后一张，瞬间回到第二张图
// 在最后一张图按下
count = ospan.length-1;
console.log(count,'1111');
oul.style.left = -count * imgW + 'px';
listLeft = oul.offsetLeft;
}
console.log(count);
// console.log(count);
})
// 拖动中
touch.on(oul, 'drag', function (ev) {
oul.style.left = ev.distanceX + listLeft + 'px';
});
// 拖动结束
touch.on(oul, 'dragend', function (ev) {
// 如果拖动的距离大于屏幕宽度的5分之一 或者 拖动的时间小于200ms 则到下一张
// console.log(ev.distanceX); // 拖动的距离 ms
// console.log(ev.duration); // 时间
// console.log(ev.direction); // 方向
if ((Math.abs(ev.distanceX) > imgW / 5) || ev.duration < 200) {
// 方向如果是左 就cont++ 方向如果是右就cont--
if (ev.direction === 'left') {
count++;
console.log(count);
} else if (ev.direction === 'right') {
count--;
}
}
// 动画的时间
oul.style.transition = 'all 0.4s';
// 动画移动的位置
oul.style.left = -count * imgW + 'px';
for (var i = 0; i < ospan.length; i++) {
ospan[i].className = '';
}
// count 对小圆点个数取余
ospan[count % ospan.length].className = 'active';
});
</script>
