轮播图制作

index.js:

window.addEventListener('load', function () {

    var arrow_l = document.querySelector('.arrow-l');

    var arrow_r = document.querySelector('.arrow-r');

    var focus = document.querySelector('.box1');

    var ul = focus.querySelector('.box2');

    var ol = focus.querySelector('.circle');

    var focusWidth = focus.offsetWidth;

    var circle = 0; //控制小圆圈的播放

    focus.addEventListener('mouseenter', function () {

        clearInterval(timer);

        timer = null;

    })

    focus.addEventListener('mouseleave', function () {

        timer = setInterval(function () {

            arrow_r.click();

        }, 2000);

    })

    for (var i = 0; i < ul.children.length; i++) {

        //创建动态li

        var li = document.createElement('li');

        //记录当前小圆圈的自定义属性,得到li的索引号

        li.setAttribute('index', i);

        ol.appendChild(li);

        //生成小圆圈的同时绑定点击事件,所以要写在for循环里面

        li.addEventListener('click', function () {

            for (var i = 0; i < ol.children.length; i++) {

                ol.children[i].className = '';

            }

            this.className = 'current';

            //点击小圆圈移动参数

            var index = this.getAttribute('index');

            //当点击li之后应该将num=index;

            num = index;

            circle = index;

            animate(ul, -index * focusWidth)

        })

    }

    ol.children[0].className = 'current';

    var first = ul.children[0].cloneNode(true);

    ul.appendChild(first);

    var num = 0;

    var flag = true; //节流阀

    arrow_r.addEventListener('click', function () {

        if (flag) {

            flag = false;

            //当走到最后一张图片时，ul的left变为0

            if (num == ul.children.length - 1) {

                ul.style.left = 0;

                num = 0;

            }

            num++;

            animate(ul, -num * focusWidth, function () {

                flag = true; //打开节流阀

            });

            //点击右侧按钮，小圆圈跟随一起变化 可以在声明一个变量控制小圆圈的播放

            circle++;

            //如果circle==4说明走到最后我们克隆的这张图片，我们就复原

            if (circle == ol.children.length) {

                circle = 0;

            }

            circleChange();

        }

    });

    //左侧按钮



    arrow_l.addEventListener('click', function () {

        if (flag) {

            flag = false;

            //当走到最后一张图片时，ul的left变为0

            if (num == 0) {

                num = ul.children.length - 1;

                ul.style.left = -num * focusWidth + 'px';

            }

            num--;

            animate(ul, -num * focusWidth, function () {

                flag = true;//打开节流阀

            });

            //点击右侧按钮，小圆圈跟随一起变化 可以在声明一个变量控制小圆圈的播放

            circle--;

            //如果circle<0说明第一张图片，则要小圆圈改为第2个小圆圈索引号为1

            // if(circle<0){

            //     circle=ol.children.length-1;

            // }

            circle = circle < 0 ? ol.children.length - 1 : circle;

            circleChange();

        }

    });



    function circleChange() {

        for (var i = 0; i < ol.children.length; i++) {

            ol.children[i].className = '';

        }

        ol.children[circle].className = 'current';

    }



    //自动播放  用定时器来做 自动播放类似于点了右侧按钮

    var timer = setInterval(function () {

        arrow_r.click();

        // arrow_l.click();

    }, 2000)

animate.js 

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();  // 左侧有参数传进来嘛? 结果为true, 再执行右边,调用回调函数(短路运算符),为假直接跳过
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
 
    }, 15);
}