我们来证明一下这个公式是正确的，首先假如我们碰着 current = 0， 那么 0 这个位置的图片的上一张就会得到 -1 这个指针，这个时候我们用 ( − 1 + 4 ) / 4 = 3 / 4 (-1 + 4) / 4 = 3 / 4 (−1+4)/4=3/4，这里 3 除以 4 的余数就是 3，而 3 恰好就是这个数组的最后一个图片。
然后我们来试试，假如当前图片就是数组内里的最后一张图，在我们的例子内里就是 3，3 + 1 = 4， 这个时候通过转换 ( 4 + 4 ) / 4 (4 + 4) / 4 (4+4)/4 余数就是 0，显然我们得到的数字就是数组的第一个图片的位置。
通过这个公式我们就可以取得上一张和下一张图片在数组内里的指针位置，这个时候我们就可以用这个指针获取到他们在节点中的工具，利用 CSSDOM 来改变他们的属性这里我们需要先把所有元素移动到当前图片的位置，然后按照 -1、0、1 这三个偏移的值对这个图片举办往左可能往右移动，最后我们要需要加上当前鼠标的拖动间隔
我们已经把整个逻辑给整理了一遍，下来我们看看 mousemove 这个事件回调函数代码的应该怎么写：
let move = event => { let x = event.clientX - startX; let current = position - Math.round(x / 500); for (let offset of [-1, 0, 1]) { let pos = current + offset; // 计较图片地址 index pos = (pos + children.length) % children.length; console.log('pos', pos); children[pos].style.transition = 'none'; children[pos].style.transform = `translateX(${-pos * 500 + offset * 500 + (x % 500)}px)`; } };
讲了那么多对象，代码就那么几行，确实代码简朴不便是它背后的逻辑就简朴。所以写代码的措施员也可以是深不行测的。
最后尚有一个小问题，在我们拖拽的时候，我们会发明上一张图和下一张有一个奇怪跳动的现象。
这个问题是我们的 Math.round(x / 500) 所导致的，因为我们在 transform 的时候，插手了 x % 500， 而在我们的 current 值的计较中没有包括这一部门的计较，所以在鼠标拖动的时候就会缺少这部门的偏移度。
我们只需要把这里的 Math.round(x / 500) 改为 (x - x % 500) / 500 即可到达同样的取整数的结果，同时还可以保存我们 x 原有的正负值。
这里其实尚有较量多的问题的，我们还没有去改 mouseup 事件内里的逻辑。那么接下来我们就来看看 up 中的逻辑我们应该怎么去实现。
这里我们需要改的就是 children 中 for 轮回的代码，我们要实现的是让我们拖动图片高出必然的位置就会自动轮播到对应偏向的下一张图片。up 这里的逻辑其实是和 move 是根基一样的，不外这里有几个处所需要变动的：
首先我们的 transition 克制是可以去掉了，改为 ' ' 空在 transform 中的 + x % 500 就不需要了，因为这里图片是我们鼠标松开的时候，不需要图片再跟从我们鼠标的位置了在计较 pos = current + offset的这里，我们在 up 的回调中是没有 current 的，所以我们需要把 current 改为 position因为有一个 z-index 的条理干系，我们会看到有图片在被挪动位置的时候，它在我们当前图片上飞过，可是飞已往的元素其实是我们不需要的元素，而这个飞已往的元素是来历于我们之前用的 [-1, 0, 1] 这内里的 -1 和 1 的两个元素，所以在 up 这个逻辑内里我们要把不需要的给去掉。意思就是说，假如我们鼠标是往左移动的，那么我们只需要 -1 的元素，相反就是只需要 1 的元素，别的的何处的元素就可以去掉了。首先 for of 轮回是没有顺序要求的，所以我们可以把 -1 和 1 这两个数字用一个公式来取代，放在我们 0 的后头。可是怎么才气找到我们需要的是哪一边呢？其实我们需要计较的就是图片在移动的偏向，所以我们要窜改的就是 position = position - Math.round(x / 500) 这行代码，这个偏向可以通过 Math.round(x / 500) - x 得到。而这个值就是相对当前元素的中间，他是更方向左边（负数）照旧右边（正数），其实这个数字是几多并不是最重要的，我们要的是它的标记也就是 -1 照旧 1，所以这里我们就可以利用 - Math.sign(Math.round(x / 500) - x) 来取得功效中的标记，这个函数最终返回要不就是 -1， 要不就是 1 了， 正好是我们想要的。其实尚有一个小 bug，当我们拖动当前图片过短的时候，图片位置的计较是不正确的。
