动画实现原理

核心原理：通过定时器setInterval()不断移动盒子

实现步骤:

1.获得盒子当前位置

2.让盒子在当前位置加一个移动位置

3.利用定时器重复这个操作

4.加一个结束定时器的条件

5.注意此元素需要添加定位，才能使用element.style.left

缓动动画原理

缓动动画是让元素运动速度有所变化，最常见的是让速度慢慢停下来

缓动动画公式：（目标值-现在的位置）/10

停止条件：让当前盒子等于目标位置就停止定时器

回调函数原理

原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，党那个函数执行完之后，再执行传进去这个函数，这个过程叫回调

动画函数封装到js单独文件中，以便后面使用

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var x = obj.offsetLeft;
        var step = (target - x) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (x == target) {
            clearInterval(obj.timer);
            // if(callback){
            //     callback();
            // }
            //两种相等 但下面更为简便
            callback && callback();
        }
        obj.style.left = x + step + 'px';

    }, 30);
}

节流阀

防止轮播图按钮连续点击造成播放过快

目的：当上一个动画函数内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

结合以上知识便可以做网页轮播图啦

window.addEventListener('load', function () {
    var lianjie1 = document.querySelector('.zhengjia');
    var lianjie2 = document.querySelector('.zhengjia2');
    var d1 = document.querySelector('.d1')
    d1.addEventListener('mousemove', function () {
        lianjie1.style.display = 'block';
        lianjie2.style.display = 'block';
        clearInterval(time);
        //清除定时器
        time = null;
    })
    d1.addEventListener('mouseleave', function () {
        lianjie1.style.display = 'none';
        lianjie2.style.display = 'none';
        time = setInterval(function () {
            lianjie2.click();
        }, 2000)
    })

    var circle = document.querySelector('ol');
    var jav = document.querySelector('.jav');
    var d1Width = d1.offsetWidth;
    var num = 0;
    for (var i = 0; i < jav.children.length; i++) {
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号
        li.setAttribute('index', i)
        circle.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < jav.children.length - 1; i++) {
                circle.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            circles = index;
            console.log(d1Width);
            console.log(index);
            animate(jav, -index * d1Width);
        })
    }
    circle.children[0].className = 'current';
    var first = jav.children[0].cloneNode(true);
    jav.appendChild(first);
    console.log(jav.children.length);

    var circles = 0;
    var flag = true;
    lianjie2.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == jav.children.length - 1) {
                jav.style.left = 0;
                num = 0;
                circle.children[0].className = 'current';
            }
            num++;
            animate(jav, -num * (d1Width + 1), function () {
                flag = true;
            });
            //控制小圆圈播放
            circles++;
            if (circles == circle.children.length) {
                circles = 0;
            }
            circlechange();
        }
    })
    //左侧按钮
    lianjie1.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                jav.style.left = -num * (d1Width + 1) + 'px';
                num = jav.children.length - 1;
                circle.children[4].className = 'current';
            }
            num--;
            animate(jav, -num * (d1Width + 1), function () {
                flag = true;
            });
            //控制小圆圈播放
            circles--;
            // if (circles < 0) {
            //     circles = circle.children.length - 1;
            // }
            circles = circles < 0 ? circle.children.length - 1 : circles;
            circlechange();
        }
    })
    function circlechange() {
        for (var k = 0; k < circle.children.length; k++) {
            circle.children[k].className = '';
        }
        circle.children[circles].className = 'current';
    }
    var time = setInterval(function () {
        lianjie2.click();

    }, 2000)
})