<script>
window.onload = function () {
var wrap = document.querySelector('.wrap'); // 最外层的盒子
var clientW = wrap.clientWidth; // 一张图片的宽度
var list = wrap.querySelector('.list'); // list
list.innerHTML += list.innerHTML; // 所有的子元素复制一份，做无缝轮播
var span = wrap.querySelectorAll('.page span'); // 分页按钮
var len = span.length * 2; // 图的个数，包含复制的图
list.style.width = clientW * len + 'px'; // 给ul设置宽度
var disX = 0; // 按下时，手指到可视区左边的距离
var listLeft = 0; // 按下时，list的left值
// 手指按下
// 1、取得手指到可视区左边的距离，取得list的left值
// 2、判断当前按下的是第几张图，如果第一张图，拉到下标为3的这张图。如果为最后一张，拉到下标为2的这张图
list.addEventListener('touchstart', function (ev) {
list.style.transition = 'none'; // 按下时，清除运动
var e = ev.changedTouches[0]; // 手指的事件对象
disX = e.pageX;
listLeft = list.offsetLeft;
var count = listLeft / clientW; // 返回的是0或者一个负数
if (count === 0) {
// 在第一张图按下
count = span.length;
list.style.left = -count * clientW + 'px';
listLeft = list.offsetLeft;
}
if (-count === len - 1) {
// 在最后一张图按下 瞬间回到第二张图
count = span.length - 1;
list.style.left = -count * clientW + 'px';
listLeft = list.offsetLeft;
}
});
// 手指移动
list.addEventListener('touchmove', function (ev) {
var e = ev.changedTouches[0]; // 手指的事件对象
list.style.left = e.pageX - disX + listLeft + 'px';
});
// 手指抬起
list.addEventListener('touchend', function () {
var num = Math.round(list.offsetLeft / clientW); // 如果移动的超过一半，就到下一张，否则还在当前张
// console.log(num);
list.style.transition = 'all 0.4s';
list.style.left = num * clientW + 'px';
for (var i = 0; i < span.length; i++) {
span[i].className = '';
}
span[-num % span.length].className = 'active';
});
}
</script>
