九、滚动轮播图修改面向过程为面向对象

执行代码：

<script src="js/bindEvent.js"></script>
<script src="js/animate.js"></script>
<script>
    // 定义一个函数，接收一个事件对象，返回滚轮滚动的方向 定义向上为false 向下为true
    function direction(e){
        // 使用e.wheelDelta 来判断是否是undefined 从而判断是哪个浏览器
        // console.log(e.wheelDelta);
        if (typeof e.wheelDelta === "undefined"){
            // console.log("是火狐");
            // 判断滚动方向
            if (e.detail > 0){
                // console.log("向下滚动");
                return true;
            } else {
                // console.log("向上滚动");
                return false;
            }
        } else {
            // console.log("不是火狐");
            // 判断滚动方向
            if (e.wheelDelta > 0){
                // console.log("向上滚动");
                return false;
            } else {
                // console.log("向下滚动");
                return true;
            }
        }
    }


    // 以下使用的是面向对象的书写方式
    // 我们要把carousel看成一个对象
    // 既然carousel是一个对象了，就可以拥有一些属性或者方法

    // 定义carousel对象
    var carousel = {
        // 容器属性
        dom: document.getElementById("carousel"),
        // 图片列表属性
        unit: document.getElementById("unit"),
        // 定义length属性
        length: document.getElementsByTagName("li").length - 1,
        // 定义锁
        lock: true,
        // 定义信号量
        idx: 0,
        // 图片向左的方法 相当于右按钮点击事件
        left: function(){
            // 函数节流
            if (!this.lock){
                return;
            }
            // 关闭锁
            this.lock = false;
            // 备份this
            var me = this;
            // 先拉动 再瞬移
            // 信号量改变
            this.idx++;
            // 拉动
            animate(this.unit, {"left": - this.idx * this.dom.clientWidth}, 1000, function(){
                // 验证信号量
                console.log(me);
                if (me.idx > me.length - 1){
                    // 让idx归0
                    me.idx = 0;
                    // 拉回原位
                    me.unit.style.left = 0;
                }
                // 开锁
                me.lock = true;
            });
        },
        // 图片向右的方法 相当于左按钮事件
        right: function(){
            // 函数节流
            if (!this.lock){
                return;
            }
            // 关闭锁
            this.lock = false;
            // 备份this
            var me = this;
            // 先瞬移 再拉动
            // 信号量改变
            this.idx--;
            // 边界判定
            if (this.idx < 0){
                this.idx = this.length - 1;
                // 瞬移到猫腻图
                this.unit.style.left = - this.length * this.dom.clientWidth + "px";
            }
            // 再拉动
            animate(this.unit, {"left": - this.idx * this.dom.clientWidth}, 1000, function(){
                console.log(me);
                // 开锁
                me.lock = true;
            });
        }
    }

    // 给document添加鼠标滚轮事件
    document.onmousewheel = function(e){
        if (direction(e)){
            // 说明是往下滚动 调用carousel的left方法
            carousel.left();
        } else {
            // 说明是向上滚动 调用carousel的right方法
            carousel.right();
        }
    }
</script>