三、滚动轮播图

3.1 dom结构

<div id="carousel">
    <ul id="unit">
        <li><img src="images/lunbo/1.jpg" alt=""></li>
        <li><img src="images/lunbo/2.jpg" alt=""></li>
        <li><img src="images/lunbo/3.jpg" alt=""></li>
        <li><img src="images/lunbo/4.jpg" alt=""></li>
        <li><img src="images/lunbo/5.jpg" alt=""></li>
        <!-- 最后一张为猫腻图 -->
        <li><img src="images/lunbo/1.jpg" alt=""></li>
    </ul>
</div>

3.2 CSS样式

/* 清楚默认样式 */
* {
    margin: 0;
    padding: 0;
}
#carousel {
    width: 220px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/* 滚动轮播图的关键：unit的宽度要足够宽，所有图片并排在一起 */
#carousel #unit {
    width: 5000px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
}
#carousel #unit li {
    float: left;
    list-style: none;
}

3.3 执行代码

<script src="js/bindEvent.js"></script>
<script src="js/animate.js"></script>
<script>
    // 获取元素
    var unit = document.getElementById("unit");
    var carousel = document.getElementById("carousel");

    // 定义宽度
    var width = carousel.clientWidth;
    // console.log(width);

    // 定义length
    var length = document.getElementsByTagName("li").length - 1;
    // console.log(length);

    // 定义锁
    var lock = true;

    // 定义信号量
    var idx = 0;

    // 绑定事件
    bindEvent(unit, "mousewheel", function(e){
        // 函数节流
        if (!lock){
            return;
        }
        // 关闭锁
        lock = false;
        // console.log(direction(e));
        // 如果返回true 向下滚动 相当于右按钮点击事件
        if (direction(e)){
            // 图片应该从右边进来
            // 右按钮的的拉动策略： 先拉动，再瞬移
            idx++;
            // 拉动 调用animate函数
            animate(unit, {left: - idx * width}, 1000, function(){ 
                // 验证信号量
                if (idx > length - 1){
                    // idx 归0
                    idx = 0;
                    // 拉回原位
                    unit.style.left = 0; 
                }
                // 开锁
                lock = true;
            });
        } else {
            // 图片应该从左侧进入 相当于左按钮事件
            // 拉动策略： 先瞬移 再拉动
            idx--;
            // 边界判定
            if (idx < 0){
                idx = length - 1;
                // 瞬移到猫腻图
                unit.style.left = -length * width + "px";
            }
            // 拉动
            animate(unit, {left: - idx * width}, 1000, function(){
                // console.log("动画完成");
                // 开锁
                lock = true;
            })
        }
    });

    // 定义一个函数，接收一个事件对象，返回滚轮滚动的方向 定义向上为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;
            }
        }
    }
</script>

3.3.1 animate.js

function animate(dom,json,time,callBack){
    /* 
        逻辑分析：
            定义间隔定时器，循环动画到目标值
            既然是循环动画，那么每一次动画都是一个步长
            步长值 = 总距离 / 总次数
            总距离 = 目标值 - 初始值
            总次数 = 总时间 / 定时器间隔时间
        */

    // 计数器
    var count = 0;
    // 定义间隔时间
    var interval = 20;
    // 总次数 = 总时间 / 间隔时间
    var allCount = time / interval;
    
    // 获取元素的总距离，就是用目标值 - 初始值
    // json里面传递的都是目标值
    // 定义一个nowJson 用于保存元素的初始值
    var nowJson = {};
    for (var i in json){
    // console.log(i);   // left top
    // nowJson[i] = getComputedStyle(dom)[i];  // {left: "50px", top: "50px"} 字符串类型
    // 转为number类型
    nowJson[i] = parseInt(getComputedStyle(dom)[i]);   // {left: 50, top: 50}
    }
    // console.log(nowJson);
    // 循环完毕之后初始值也就有了

    // 计算总距离，再得到步长值
    var stepJson = {};
    for (var i in json){
        // 步长值 = （目标值 - 初始值）/ 总次数
        stepJson[i] = (json[i] - nowJson[i]) / allCount
    }
    // console.log(stepJson);   // {left: 19, top: 9}

    // 定义定时器
    var timer = setInterval(function(){
        // 计数器++
        count ++;
        // 改变dom的定位值
        for (var i in json){
            // 当前值 = 初始值 + 步长值 * 次数
            dom.style[i] = nowJson[i] + stepJson[i] * count + "px";
        }
        // 判断是否到达边界
        if (count >= allCount){
            // 停止定时器
            clearInterval(timer);
            // 执行回调函数 短路语法 存在callBack 执行后面的，不存在就执行前面的
            callBack && callBack();
        }
    }, interval);
}

3.3.2 bindEvent.js

// 定义一个函数，可以实现多个浏览器的事件绑定
function bindEvent(dom, type, fn){

    // 判断type类型
    if (type.toLowerCase() === "mousewheel"){
        // 判断是否是火狐浏览器
        var isFF = window.navigator.userAgent.indexOf("Firefox") === - 1 ? false : true;
        // console.log(isFF);
        // 如果是火狐 要添加DOMMouseScroll事件
        if (isFF){
            dom.addEventListener("DOMMouseScroll", fn, false);
            return;
        }
    }
    // 使用能力检测，检测浏览器支持哪种浏览器
    if (dom.addEventListener){
        // 说明是高级浏览器  IE没有第三个参数，只支持冒泡，在这里直接写死，绑定到冒泡阶段
        dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent){
        // 说明是IE中的高级版本
        dom.attachEvent("on" + type, fn);
    } else {
        // 说明是其他不知名浏览器
        // dom.onclick = function(){}
        dom["on" + type] = fn;
    }
}