JS实现轮播图小案例

// 获取左右箭头的元素    let arrow_l = this.document.querySelector('.arrow-l');    let arrow_r = this.document.querySelector('.arrow-r');    // 获取到轮播图盒子元素    let focus = this.document.querySelector('.focus');    // 轮播图盒子添加鼠标移入移出事件 显示或隐藏 左右箭头    focus.addEventListener('mouseenter', function(e) {        arrow_l.style.display = 'block';        arrow_r.style.display = 'block';        // 鼠标移入的时候清除定时函数，不再自动滑动轮播图        clearInterval(timer);        timer = null;    });    focus.addEventListener('mouseleave', function(e) {        arrow_l.style.display = 'none';        arrow_r.style.display = 'none';        // 鼠标移出  添加定时任务，每2秒来触发一次点击右箭头的点击        timer = setInterval(function() {            arrow_r.click();        }, 2000);    })

// 获取到ul列表（轮播图列表）和ol列表 （小圆圈列表）元素var ul = focus.querySelector('ul');// 此时ol列表内没有元素var ol = focus.querySelector('.circle');// 循环轮播图列表 有多少张轮播图就添加多少个小圆圈for (var i = 0; i < ul.children.length; i++) {        // 创建li标签        var li = this.document.createElement('li');        // 给li标签添加自定义属性 为轮播图的下标 用于        li.setAttribute('l-index', i);        // ol标签添加li标签        ol.appendChild(li);        // 每一个li标签添加点击函数        li.addEventListener('click', function() {            // 清除所有小圆圈的样式            for (var j = 0; j < ol.children.length; j++) {                ol.children[j].className = '';            }            // 点击哪一个小圆圈  就添加样式            this.className = 'current';   // 点击小圆圈  更改num和circl 来更换轮播图            num = this.getAttribute('l-index');            circl = this.getAttribute('l-index');            // 动画效果            animate(ul, -num * focusWidth);        })    }

// 克隆一个第一张轮播图的节点添加到ul内// 播放到最后一个的时候  转到第一个看着有连贯性    ol.children[0].className = 'current';    let cloneLi = ul.children[0].cloneNode(true);    ul.appendChild(cloneLi);    // 添加一个下标  来记录轮播图播放到了第几张    num = 0;    // 与num类似，记录小圆圈的下标    circl = 0;    // 添加节流阀    flag = true;

// 点击右箭头的  点击事件arrow_r.addEventListener('click', function(e) {        // 添加一个节流阀 默认为True 如果点击之后立即改为false  如果没处理完上次点击的事件 这个时间内的点击事件不再处理        if (flag) {            // 改变节流阀的状态            flag = false;            // 如果num下标为最后一张 就恢复到第一张 把num下标改为默认0            if (num == ul.children.length - 1) {                ul.style.left = 0;                num = 0;            }            // num下标加1            num++;            // 改变动画效果 滑动到  第几张轮播图 * 一张的宽度 的距离            animate(ul, -num * focusWidth, function() {                // 回调函数设置节流阀为true  可以再次点击                flag = true;            });            // 小圆圈+1            circl++;            // 如果小圆圈到了最后一个  恢复为0            if (circl == ul.children.length - 1) {                circl = 0;            }            // 改变小圆圈的样式            circlChange();        }    })

// 左箭头的点击事件    arrow_l.addEventListener('click', function(e) {        if (flag) {            flag = false;            // 判断为0时说明是从第一张开始往左点            if (num == 0) {                // 更改num下标为最后一个                num = ul.children.length - 1;                // 更改轮播图为最后一个                ul.style.left = -num * focusWidth + 'px';            }            // num -1            num--;            // 动画效果            animate(ul, -num * focusWidth, function() {                flag = true;            });            // 如果小圆圈为0  说明到了第一个轮播图            if (circl == 0) {                // 小圆圈到最后一个                circl = ul.children.length - 1;            }            // 小圆圈-1            circl--;            // 改变小圆圈的样式            circlChange();        }    })

function circlChange() {     // 遍历ol列表  删除每一个小圆圈的样式        for (var i = 0; i < ol.children.length; i++) {            ol.children[i].className = '';        };        // 给当前circl下标的小圆圈添加样式        ol.children[circl].className = 'current';    }

function animate(obj, target, callback) {    // console.log(callback);  callback = function() {}  调用的时候 callback()    // 先清除以前的定时器，只保留当前的一个定时器执行    clearInterval(obj.timer);    obj.timer = setInterval(function() {        // 步长值写到定时器的里面        // 把我们步长值改为整数 不要出现小数的问题        // var step = Math.ceil((target - obj.offsetLeft) / 10);        var step = (target - obj.offsetLeft) / 10;        step = step > 0 ? Math.ceil(step) : Math.floor(step);        if (obj.offsetLeft == target) {            // 停止动画 本质是停止定时器            clearInterval(obj.timer);            // 回调函数写到定时器结束里面            // if (callback) {            //     // 调用函数            //     callback();            // }            callback && callback();        }        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10        obj.style.left = obj.offsetLeft + step + 'px';    }, 15);}