手把手过一遍js的轮播图原理

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

轮播图

//匀速动画 就是 盒子当前的位置 + 固定的值, 每次加10

//缓慢动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10

 

//正值还是负值取决去step

var step = target - obj.offset) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

节流阀

开始设置一个变量 var flag = true;

if(flag){flag = false; do something}

利用回调函数动画执行完毕, flag = true

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

flag = true;

})

无缝滚动的逻辑

获取元素

动态生成小圆圈,有几张图片,我们就生成几个小圆圈

创建小li

记录当前小圆圈的索引号,通过自定义属性

li.setAttribute('index', i); ol.appendChild(li); 小圆圈排他思想

点击小圆圈,移动ul

当点击了某个li,就把li的索引号给num,还要给circle 保持向右和点击小圆圈保持同步

无缝滚动:如果走到最后复制的图片,最后的的ul要快速复原, left的值改为0

动画函数添加回调函数

函数作为一个参数, 将这个函数作为参数传到另一个函数里面

当函数执行完之后,再执行穿进去的这个函数

这个过程叫做回调

回调函数要写在定时器结束的位置

缓慢动画封装的原理

1.盒子每次移动的距离慢慢变小,速度就会慢下来

2.核心算法 (目标的值 - 现在的位置) / 10 就是每次移动的距离不长

3.动画定制的条件: 需要让单签的盒子的位置等于目标位置 然后就可以停止定时器了

4.一定要注意步长值 需要取整数

5, 当步长值大于0的时候,向上取证, 步长值小于0的时候,向下取整

封装添加小圆圈的类的函数

    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();
    }, 2000)