网页轮播图练习（案例）

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

功能需求：

1. 鼠标经过轮播图时，显示左右按钮，鼠标离开则隐藏；
2. 点击右侧按钮一次，图片往左播放一张，依次类推，左侧按钮同理；
3. 图片播放的同时，下面的小圆圈模块随之一起变化；
4. 点击小圆圈，可以播放相应的图片；
5. 鼠标不经过轮播图，轮播图也会自动播放图片；
6. 鼠标放到轮播图上，自动播放就停止。

案例分析：

① 因为 JS 较多，先单独新建 JS 文件夹，再新建 JS 文件，引入页面中。

② 此时需要添加 load 事件。

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

④ 显示隐藏 display。

// 1.获取元素
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var focus = document.querySelector('.focus');
// 2. 鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
    })
focus.addEventListener('mouseleave', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
    })

考虑到小圆圈是对应图片数量变化的，每增加一张图片又手动改代码会很麻烦，下面分析一下如何动态生成小圆圈。

动态生成小圆圈：

① 核心思路：小圆圈的个数要跟图片张数一致；

② 所以首先先得到 ul 里面图片的张数（图片放入 li 里面，所以就是 li 的个数）；

③ 利用循环动态生成小圆圈（这个小圆圈要放入 ol 里面）；

④ 创建节点 createElement(‘li’) ；

⑤ 插入节点 ol. appendChild(li) ；

⑥ 第一个小圆圈需要添加 current 类 。

点击小圆圈，发现点到哪个小圆圈就会变色，其他小圆圈不变色，此处联想到排他思想，因此，

小圆圈的排他思想：

① 点击当前小圆圈，就添加current类 ；

② 其余的小圆圈就移除这个current类 ；

③ 注意： 我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。   

// 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.setAttribute('index', i);
        // 把小 li 插入到 ol 里面
        ol.appendChild(li);
        // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            // 干掉所有人 把所有的小 li 清除 current 类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己 当前的小 li 设置 current 类名
            this.className = 'current';

接下来，就是点击小圆圈实现滚动图片的效果，此时用到 animate 动画函数:

① 引入 animate 动画函数的 js文件（注意，因为