这个是因为我们的 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轮播组件内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: