web端鼠标左右拖拽，滑动图片

Question

这个网页http://eicodesign.com/ 顶部的鼠标点击左右拖拽，可以滑动是怎么实现的？

Answer 1

大概事件思路：onmousedown、onmousemove 、onmouseup

---

相关资料：

纯 JS 实现：http://fgm.cc/learn/lesson8/01.html （参考它滑动滚动条图片滑动，只是它有个小延迟效果）

jQuery 插件：http://kenwheeler.github.io/slick/

---

补充：

不用判断左右，判断当前位置即可，参考 http://fgm.cc/learn/lesson8/01.html 代码 77~100 行。
他是在鼠标松开时做了图片移动，你需要在鼠标滑动时做图片移动。

var x1, x2;

picObj.onmousedown = function (event) {

    // ① 这里获取点击鼠标时当前的位置
    x1 = xxx;
    
    document.onmousemove = function (event) {
        // ② 这里获取鼠标滑动时的当前位置
        x2 = xxx;
        
        // ③ 这里的 tmpX 大于 0 就是向右滑，小于 0 就是向左滑，但这个无需考虑
        var tmpX = x2 - x1;
        
        // ④ 这里结合 x1, x2 和图片的 width 做些计算，得到当前位置
        tmpX = xxxxxx;
        
        // ⑤ 将最后得到的位置传入图片开始移动方法，开始移动图片
        startMove(tmpX);
    };        
    
    document.onmouseup = function() {
        // ⑥ 鼠标松开时停止图片移动
        stopMove();
    };

    return false;

};