1,先获取盒子 ul ol元素
2,index= 0初始化
3,开启定时器 index++;
3,translateX = -index * 盒子的宽度
4,过渡完成 循环图片 小圆点 跟随变化 先移除classList.remove(‘current’);再添加ol.children[index].classList.add(‘current’);
5,因为是横的所以计算X坐标 计算移动距离
原来的位置+手指的移动距离
6,手指离开 根据移动距离是判断还是回弹播放 并重新开启定时器
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var w = focus.offsetWidth; //获取focus的宽度
var ol = focus.children[1];
//利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function() {
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translateX + 'px)';
}, 2000);
//过渡完成 再去判断 监听事件
ul.addEventListener('transitionend', function() {
//index 大于等于 3 直接跳回 第一张
if (index >= 3) {
index = 0;
ul.style.transition = 'none';
var translateX = -index * w;
ul.style.transform = 'translateX(' + translateX + 'px)';
} else if (index < 0) { // 倒回来滑 跳到 第三张
index = 2;
ul.style.transition = 'none';
var translateX = -index * w;
ul.style.transform = 'translateX(' + translateX + 'px)';
}
//小圆点跟随变化
//先移除 current
ol.querySelector('.current').classList.remove('current');
//再添加 当前index 的类名
ol.children[index].classList.add('current');
});
//手指滑动轮播图
var startX = 0;
var moveX = 0;
var flag = false;
//手指触摸事件
ul.addEventListener('touchstart', function(e) {
//获取手指触摸的X坐标
startX = e.targetTouches[0].pageX;
//触摸时停止定时器
clearInterval(timer);
});
//移动手指事件
ul.addEventListener('touchmove', function(e) {
//计算移动的距离
moveX = e.targetTouches[0].pageX - startX;
// 移动盒子: 盒子原来的位置 + 手指移动的距离
var translateX = -index * w + moveX;
ul.style.transition = 'none';
ul.style.transform = 'translateX(' + translateX + 'px)';
flag = true;
e.preventDefault(); //阻止滚动屏幕的行为
});
//手指离开 根据移动距离判断是回弹还是播放 上一张 下一张
ul.addEventListener('touchend', function() {
if (flag) {
//移动距离大于50像素就播放上一张或者下一张
if (Math.abs(moveX) > 50) {
// 如果是右滑就是 播放上一张 moveX 是正值
if (moveX > 0) {
index--;
} else {
// 如果是左滑就是 播放下一张 moveX 是负值
index++;
}
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translateX + 'px)';
} else {
//如果手指移动小于 50像素 就回到原来位置
var translateX = -index * w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX(' + translateX + 'px)';
}
}
//手指离开就重新开启定时器
clearInterval(timer);
timer = setInterval(function() {
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translateX + 'px)';
}, 2000);
});
})