javaScript系列---【轮播图】

 <div class="box">

        <ul class="imgList">

        </ul>

        <div class="btn">

            <span class="leftBtn"></span>

            <span class="rightBtn"></span>

        </div>

        <div class="circle">

            <ul>

                <li class="active"></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </div>

<script>
        // 获取元素
        var box = document.querySelector('.box');
        var imgList = document.querySelector('.imgList');
        var leftBtn = document.querySelector('.leftBtn');
        var rightBtn = document.querySelector('.rightBtn');
        var circleLis = document.querySelectorAll('.circle li');

        ajax({
            type: 'get',
            url: './data/banner.json',
            success: function (res) {
                
                // 第一步:遍历数据  获取数据
                for (var i = 0; i < res.data.length; i++) {
                    imgList.innerHTML += '<li><a href=""><img src=' + res.data[i].coverimg + ' alt=""></a></li>';
                }

                // 声明变量记录图片编号(0-2, 3是临时工假0)
                var index = 0;

                // 第二步:绑定事件--点击右按钮
                rightBtn.onclick = rightBtnHandler;
                function rightBtnHandler() {
                    // 判断是否正在动画,如果在动画就直接结束
                    if (imgList.isAnimate) return;
                    // 编号++
                    index++;
                    change();
                }

                // 自动轮播
                var timer = setInterval(rightBtnHandler, 3000);
                // 鼠标进入box,停止轮播
                box.onmouseenter = function () {
                    clearInterval(timer);
                }
                // 鼠标离开box,继续轮播
                box.onmouseleave = function () {
                    timer = setInterval(rightBtnHandler, 3000);
                }

                // 第二步:绑定事件--点击左按钮
                leftBtn.onclick = function () {
                    // 判断是否正在动画,如果在动画就直接结束
                    if (imgList.isAnimate) return;
                    // 编号--
                    index--;
                    change();
                }

                function change() {
                    // 当点击左按钮要从0到2时
                    if (index < 0) {
                        // 瞬间来到假0位置
                        imgList.style.left = -1920 * 3 + 'px';
                        // 把编号变为2
                        index = 2;
                    }
                    // 根据编号移动imgList
                    bufferMove(imgList, { left: -1920 * index }, function () {
                        // 如果有2到假0动画完成,瞬间回到真0位置, 图片编号跟随变化为0
                        if (index == 3) {
                            imgList.style.left = '0px';
                            index = 0;
                        }
                    });

                    // 根据index修改小圆点
                    for (var i = 0; i < circleLis.length; i++) {
                        circleLis[i].className = '';
                    }
                    circleLis[index > 2 ? 0 : index].className = 'active';
                }

            }
        });
　　

    </script>

// 缓冲运动函数
// ele: 元素 targetJson: 目标json值 callback: 回调函数
// 约定opacity在传参时手动放大100倍
function bufferMove(ele, targetJson, callback) {
    // 进入函数,表示元素要开始动画
    ele.isAnimate = true;
    // 清除定时器
    clearInterval(ele.timer);
    // 把定时器作为自定属性绑定在元素上,多个不同元素之间不会相互影响
    ele.timer = setInterval(function () {

        // 假定已经到了终点(声明变量为true), 在forin中每次走完一步, 对当前位置进行判断, 如果有任意属性未到终点(变量变为false), 直到有一次全部都到达终点, 变量在forin执行完毕后仍为true, 停止定时器
        var tag = true;
        // 遍历targetJson
        for (var attr in targetJson) {
            if (attr == 'opacity') {
                // 获取元素当前透明度(放大100倍)
                var nowattr = parseInt(getStyle(ele, attr) * 100);
            } else {
                var nowattr = parseInt(getStyle(ele, attr));
            }
            // 计算步长: (目标值-当前值)/比例 
            var step = (targetJson[attr] - nowattr) / 10;
            // 对步长进行判断,如果是正方向运行向上取整,如果是负方向运行向下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // console.log(step);
            // 加上步长
            nowattr += step;

            // 赋值
            if (attr == 'opacity') {
                // 赋值(透明度缩小100倍)
                ele.style[attr] = nowattr / 100;
            } else {
                ele.style[attr] = nowattr + 'px';
            }

            // 有属性未到终点,变量变成false
            if (nowattr != targetJson[attr]) {
                tag = false;
            }
        }

        // 如果forin执行完毕tag仍未true,表示全部到达终点
        if (tag) {
            clearInterval(ele.timer);
            // 结束动画,把isAnimate变为false
            ele.isAnimate = false;
            // 调用回调函数
            // if (callback) {
            //     callback();
            // }
            callback && callback();
        }
    }, 50);
}

// 封装ajax
// req是参数,格式json   ex:{type: 'get', url: '请求路径', data: '参数', success: 回调函数}
function ajax(req) {
    // 创建请求对象
    var xhr = new XMLHttpRequest();

    if (req.type.toLowerCase() == 'get') { // get
        // 如果有参数把参数拼接在url上
        req.url = req.data ? req.url + '?' + req.data : req.url;
        // 配置
        xhr.open('get', req.url, true);

        // 发送请求
        xhr.send();
    } else { // post
        // 2.配置
        xhr.open('post', req.url, true);

        // post请求需要在发送请求前设置请求头, 设置编码方式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 3.发送 post请求的参数写在send方法中
        req.data ? xhr.send(req.data) : xhr.send();
    }

    // 监听事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // console.log(typeof xhr.responseText);
                // document.write(xhr.responseText);
                req.success(JSON.parse(xhr.responseText));
            }
        }
    }
}