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));
            }
        }
    }
}

 

posted on 2021-04-12 21:32  码农小小海  阅读(68)  评论(0编辑  收藏  举报

导航