PC端常见网页特效

5.常见网页特效案例

案例：网页轮播图

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

注意：

1. 为了保证所有的li能在一行显示，必须保证ul足够大

 

注意：因为页面中相同元素较多，所以获取元素的时候尽量要准确

 

 注意：

1. 因为index.js里面需要用到animate.js，所以animate.js要在index.js上面引入，确保先有animate.js再有index.js 
2. 必须给ul设置定位，因为真正移动的是ul
3. 
4. ul的移动距离是负值

 

 注意：

1. 
2. 但是这样做会有一个问题，就是底部的小圆圈会多一个，后续继续改进

 

 注意：

1. 因为我们克隆第一张图片的代码写在了生成小圆圈的下面，所以不会多生成一个小圆圈
2. 克隆的代码写在点击按钮之前

 

 注意：

1. 因为我们li（图片）的个数比小圆圈要多一个，所以图片显示到最后一张的时候（表面看起来是回到第一张播放），小圆圈会不够，于是就不显示，所以当circle的值等于小圆圈的个数的时候，就让circle的值重新等于0
2. 因为circle变量在左侧按钮也需要使用，所以声明成全局变量

几个bug的改进

1. 如果同时使用小圆圈和右侧按钮进行图片的滚动，一般会出现图片顺序上的错误，因为 小圆圈是通过每一个li的下标来控制图片的，而按钮是通过变量num来控制图片的，二者没有统一起来 解决方法：让num=index
2. 底部的小圆圈同理，当前小圆圈的下标circle没有和li的索引号对应。解决方法：让circle=index
3. 因为num和circle都是全局变量，在任何地方都可以使用，可以直接修改到它们使用处的值

左侧按钮 和右侧按钮基本同理

 

window.addEventListener('load', function () {
    // 1.获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');

    // 2.鼠标经过大盒子的时候，左右图标显示，离开大盒子的时候，左右图标隐藏
    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);
    })

    // 3.动态生成小圆圈，有几张图片（几个li）就生成几个
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var focusWidth = focus.offsetWidth;  //图片宽度

    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        // 创建li
        var li = document.createElement('li');
        ol.append(li);

        // 创建的时候，给每个li设置一个自定义属性index 索引号
        li.setAttribute('index', i);
        //4.利用排他思想 可以在生成小圆圈的同时给它设置点击事件
        li.addEventListener('click', function (e) {
            // 干掉所有人
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己
            e.target.className = 'current';
            // 5.点击小圆圈 移动图片 其实移动的是ul
            // ul的移动距离 小圆圈的索引号*图片的宽度 是负值
            // 当我们点击li，就会拿到它的索引号
            var index = e.target.getAttribute('index');
            // 当我们点击了某个li，就要把这个li的索引号赋值给num,为了保证小圆圈和按钮对应
            num = index;
            circle = index;
            animate(ul, -index * focusWidth);
        })
    }
    // 把ol里面的第一个小li设置类名为current
    ol.firstElementChild.className = 'current';

    // 6.克隆第一张图片(li)，添加到ul的最后
    var first = ul.children[0].cloneNode(true);
    ul.append(first);

    //7.点击右侧按钮，图片滚动一张

    var num = 0;

    var circle = 0;
    arrow_r.addEventListener('click', function () {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);

        // 8.点击右侧按钮，小圆圈跟着一起变化，可以再声明一个变量控制小圆圈的播放
        circle++;
        // 如果circle==4,就让circle重新等于0
        if (circle == ol.children.length) {
            circle = 0;
        }
        circleChange();
    });

    // 9.左侧按钮
    arrow_l.addEventListener('click', function () {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -(num) * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth);

        // 8.点击右侧按钮，小圆圈跟着一起变化，可以再声明一个变量控制小圆圈的播放
        circle--;
        // 如果circle<0,说明已经到了第一个图片，再继续点击左侧按钮，按理来说应该到最后一张图片了，所以circle值改为最后一个小圆圈的下标
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        circleChange();
    });
    function circleChange() {
        // 先清除其他小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }

    // 10.自动播放轮播图
    var timer = setInterval(function () {
        // 手动调用点击事件
        arrow_r.click();
    }, 2000);
})

5.1 节流阀

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

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

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

比如：轮播图，我们可以快速的点击按钮，让图片迅速变换，节流阀可以让一张图片变换完成之后再进行下一次变换

开始设置一个变量var flag = true;
if (flag) {
    flag = false;  //关闭节流阀
    执行的代码
}
利用回调函数 动画执行完毕，flag=true 打开水龙头

 

 通过回调函数使flag重新等于false

逻辑中断应用

function animate(obj, target, callback) {

    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        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()
            callback && callback();
        }

        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

案例：返回顶部

滚动窗口至文档中的特定位置

window.scroll(x,y) //x,y没有单位

    
    
    
    
    



    

        返回顶部
    
    
头部区域
    
banner区域
    
主体部分
    

 点击返回顶部之后，页面缓慢的返回顶部

案例：筋斗云案例 

鼠标移动到某个li上，当前li的位置就作为动画函数的目标位置，鼠标移开之后，就回到起始的位置，最左边（0），而当鼠标单击了某个li之后，就将这个li的位置作为起始的位置

    
    
    
    
    



    

        
        

            
首页新闻
            
师资力量
            
活动策划
            
企业文化
            
招聘信息
            
公司简介
            
我是佩奇
            
啥是佩奇