前言
在中,我们使用 tween算法实现了 ease-out移动效果,其实更简洁的方法是使用 css3的 transition动画，下面话不多说了，来一起看看详细的介绍吧。
核心点:
在 我们通过代码来移动一段距离的时候,使用 transion动画;在手指移动的时候,不使用transition动画.
使用 transition实现的动画效果的轮播图js代码不足100行
// 给图片设置合适的left值,注意 querySelectorAll返回 NodeList,具有 forEach方法
nodeList.forEach(function (node,index) {
node.style.left = (index - 1) * width + 'px';
});
nodeList.forEach(function (node,index) {
node.style.left = (index - 1) * width + 'px';
});
/**
- 移动图片到当前的 tIndex索引所在位置
- @param {number} tIndex 要显示的图片的索引
- /
function toIndex(tIndex) {
var dis = -(tIndex width);
// 动画移动
imgWrap.style.transform = 'translate3d(' + dis + 'px,0)';
imgWrap.style.transition = 'transform .2s ease-out';
movex = dis;
// 索引到最后一张图片,迅速切换索引到同一张图的初始位置
setTimeout(function () {
if (tIndex === imgSize) {
imgWrap.style.transform = 'translate3d(0,0)';
imgWrap.style.transition = 'none';
movex = 0;
}
if (tIndex === -1) {
imgWrap.style.transform = 'translate3d(' + width (1 - imgSize) + 'px,0)';
imgWrap.style.transition = 'none';
movex = -width (imgSize - 1);
}
},200);
}
/**
- 处理各种触摸事件,包括 touchstart,touchend,touchmove,touchcancel
- @param {Event} evt 回调函数中系统传回的 js 事件对象
- /
function touch(evt) {
var touch = evt.targetTouches[0];
var tar = evt.target;
var index = parseInt(tar.getAttribute('data-index'));
if (evt.type === 'touchmove') {
var di = parseInt(touch.pageX - lastPX);
endX = touch.pageX;
movex += di;
imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px,0)';
imgWrap.style.transition = 'none'; // 移动时避免动画延迟
lastPX = touch.pageX;
}
if (evt.type === 'touchend') {
var minus = endX - startX;
t2 = new Date().getTime() - t1;
if (Math.abs(minus) > 0) { // 有拖动操作
if (Math.abs(minus) < width 0.4 && t2 > 500) { // 拖动距离不够,返回!
toIndex(index);
} else { // 超过一半,看方向
console.log(minus);
if (Math.abs(minus) < 20) {
console.log('距离很短' + minus);
toIndex(index);
return;
}
if (minus < 0) { // endX < startX,向左滑动,是下一张
toIndex(index + 1)
} else { // endX > startX,向右滑动,是上一张
toIndex(index - 1)
}
}
} else { //没有拖动操作
} }
if (evt.type === 'touchstart') {
lastPX = touch.pageX;
startX = lastPX;
endX = startX;
t1 = new Date().getTime();
}
return false;
}
imgWrap.addEventListener('touchstart',touch,false);
imgWrap.addEventListener('touchmove',false);
imgWrap.addEventListener('touchend',false);
imgWrap.addEventListener('touchcancel',false);
}();
注意事项:
当切换到边界值的图时,应该等到切换动画效果之后再换到相同图内容的位置
所以: 我们使用setTimeout延迟执行 无限循环播放替换图位置的操作
至于 css 和 html嘛,还是原来的配方,还是原来的味道~参见这篇文章：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/36529.html