前端学习笔记-JS-BOM-轮播图案例/节流阀

网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧同理

3.图片播放的同时，下面的小圆圈模块跟随一起变化

4.点击小圆圈，可以播放相应的图片

5.鼠标不经过轮播图，轮播图也会自动播放图片

6.鼠标经过，轮播图模块，自动停止播放

 

HTML主要布局部分：

 

            
            
                <
            
            
              
            
            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
            
            
            


            
        

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();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

JS轮播图实现部分：

// 因为要等页面加载完成才使用js 所以需要load事件
window.addEventListener('load', function () {
    // 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
    // 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 鼠标经过
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 停止自动播放 即停止定时器 并且把定时器置为空
        clearInterval(timer);
        timer = null;
    });
    // 鼠标离开
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 重新开启定时器
        timer = setInterval(function () {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);

    });
    // 2.我们想让轮播图底部的小圆圈跟随轮播图 动态生成  核心思路：小圆圈的个数要和图片张数一致
    // 所以首先要得到ul里面图片的张数（图片放在li里面，所以的ul里面li的个数）
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // 利用循环生成小圆圈（这个小圆圈要放在ol里面）
    for (var i = 0; i < ul.children.length; i++) {
        // 创建节点createElement（'li'） 插入节点ol.appendChild(li)
        var li = document.createElement('li');
        ol.appendChild(li);
        // 给li添加自定义属性
        li.setAttribute('index', i);
        // 3.给小圆圈绑定点击事件 被点击到的小圆圈 添加current类 排他思想
        // 因为click后面的函数 属于回调函数 需要等执行栈的语句执行完 才能进入执行栈 所以ol.children[0].className = 'current';比它先执行 所以ol.children[0].className = 'current';可以写在下方
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 点击小圆圈，滚动图片 引入之前写好的animate动画函数 注意使用画函数的前提 元素需要有定位
            // 是ul移动 不是li移动 核心：移动的距离=li的索引号(在生成li的时候生成一个自定义属性)*图片的宽度 因为是往左移动 注意取负值
            var index = this.getAttribute('index');
            animate(ul, -index * focusWidth);
            // 当我们点击了小圆圈，需要把它的索引号，同步给num和circle
            num = index;
            circle = index;
        })
    }
    // 第一个小圆圈需要添加current类
    ol.children[0].className = 'current';

    // 5.clone ul的第一个li复制一份,因为之间在ul中添加新的li，在生成小圆圈的时候也会生成，所以我们采取在JS中当小圆圈已经生成之后 使用cloneNode()，生成
    var laseLi = ul.children[0].cloneNode(true);
    ul.appendChild(laseLi);

    // 4.点击右侧按钮 图片滚动一张
    var num = 0;
    // 控制点击右侧按钮 底下的小圆圈滚动
    var circle = 0;
    // 设置节流阀 防止轮播图按钮连续点击造成播放过快
    var flag = true;
    arrow_r.addEventListener('click', function () {
        if (flag) {
            // 关闭节流阀 只有当动画函数animate执行完毕，在打开节流阀
            flag = false;
            // 每次图片滚动 mun加一  移动的距离=mun*图片的宽度
            // 图片无缝滚动 把ul的第一个li复制一份，放到ul的最后面 当图片滚动到最后克隆的那一张，让ul快速的 不做动画的跳到最左侧，left：0
            if (num == ul.children.length - 1) {
                ul.style.left = 0 + 'px';
                num = 0; // 记得把num置为0 点击的时候 才能去往第二张图片
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                // 通过回调函数 判断动画已经执行完毕
                flag = true;
            });
            // 6.声明一个 circle 变量 控制点击按钮时，下面的小圆圈也跟着变化 因为左侧也需要使用 所以声明为全局变量
            // 每次点击后， circle自加
            circle++;
            // 采用排他思想，把其他的样式都设置为''，circle所在的li设置为'current'
            // 设置一个判断条件 如果  circle 走到的最后一张 即clone的那张 就重置circle
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    });

    // 7.左侧点击按钮
    arrow_l.addEventListener('click', function () {
        if (flag) {
            // 如果num=0，当我们再次点击左侧按钮时，要迅速跳到最后一张 然后在自到倒数第二张做动画
            // 要走的距离等于（ul.children.length-1）*focus盒子的宽度
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focus.offsetWidth + 'px';

            }
            num--;
            animate(ul, -num * focusWidth,function () {
                 flag = true;
            });
            circle--;
            // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            // 调用函数
            circleChange();
        }
    });
    // 8.自动播放功能 自动播放相当于是手动点击右侧按钮
    var timer = setInterval(function () {
        //手动调用点击事件
        arrow_r.click();
    }, 2000);

    // 封装一个函数 控制小圆圈当前变大的样式
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            // 先清除其余小圆圈的current类名
            ol.children[i].className = '';
        }
        // 留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';
    }
});

 

节流阀

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

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

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

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

if(flag)(flag=false;do something)   关闭水龙头

利用回调函数 动画执行完毕，flag=true  打开水龙头