这个是因为我们的 Match.round() 的特性，在 250（500px 刚好一半的位置） 之间是有一定的误区，让我们无法判断图片需要往那个方向移动的，所以在计算往 Match.round 的值之后我们还需要加上 + 250 * Match.sign(x)，这样我们的计算才会合算出是应该往那边移动。
最终我们的代码就是这样的：
let up = event => { let x = event.clientX - startX; position = position - Math.round(x / 500); for (let offset of [0, -Math.sign(Math.round(x / 500) - x + 250 * Math.sign(x))]) { let pos = position + offset; // 计算图片所在 index pos = (pos + children.length) % children.length; children[pos].style.transition = ''; children[pos].style.transform = `translateX(${-pos * 500 + offset * 500}px)`; } document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', up); };
改好了 up 函数之后，我们就真正完成了这个手动轮播的组件了。
到此这篇关于使用JSX实现Carousel轮播组件的方法(前端组件化)的文章就介绍到这了,更多相关JSX实现Carousel轮播组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: