网页轮播图实现

学习目标：网页轮播图的实现

1.offset .client. scroll 三大家族
2.缓动动画的原理和封
3.网页轮播图实现
4.节流阀 返回顶部及筋斗云案例
5.移动端轮播图实现
6.移动端插件使用 及轮播图的实现
7.html5本地储存及记住用户名案例

学习内容：网页轮播图的实现

注意：

（1）孩子可以比父亲宽，只是在孩子没有设置宽度时 ，是根据父亲来判断宽度（这里为了让所有li的图片浮动在一行显示 设定ul宽度为600%）。

（2）轮播图必须是 ul >li 用小li装图片 浮动flaot。

1.鼠标经过轮播图时，显示隐藏左右箭头

window.addEventListener('load',function() {//页面加载结束后再执行
    //1.获取元素
    var arrow_l= document.querySelector('.arrow-l');//arrow:箭头
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');//focus:中心 焦点

    //2.鼠标经过focus，就显示隐藏左右按钮
    focus.addEventListener('mouseenter',function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    })

    focus.addEventListener('mouseleave',function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    })
 
})

2.动态生成小圆圈

设定：
如果有四张图片既有四个小圆圈，如果有八张图片既有八个小圆圈。

核心思路：
（1）利用for循环动态生成小圆圈（这个小圆圈要放到ol里面）。
（2）创建节点 createElement(‘li’)
（3）插入节点 ol.appendChild(li)

//3.动态生成小圆圈 有几张图片 生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for(var i = 0 ; i < ul.children.length ; i++) {
        //创建一个li
        var li = document.createElement('li');
        //把li插入到ol里面
        ol.appendChild(li);
    }
    //把ol里面的第一个li设置类名为current，current现在的
    ol.children[0].className = 'current';

这里注意必须在全局中设定（使得在一开始刷新页面时不做任何事件时第一个圆圈就是白色）

  //把ol里面的第一个li设置类名为current，current现在的
    ol.children[0].className = 'current';

3.小圆圈的排他思想

设定：
点击哪个小圈 那个小圈就变白色。

（1）给每个ol新建的li都要绑定点击事件。
（2）点击当前的小圆圈，就添