JS--轮播图的实现 案例二

轮播图（需要完整的该代码在资源中自行下载）

轮播图的结构分析

首先我们需要一个大盒子里面包含两个箭头以及四个小圆点，当我们点击左右两个箭头和四个小圆点的时候图片可以达到切换的目的，其中注意样式假如轮播图中的图片有四张，我们必须使用ul（li）来存储，并且使用float浮动让他们在一行，当我们给最大的盒子设置了死宽度，必须要给大盒子将宽度改为400%(4倍)，否则浮动的li无法在一行显示，因为盒子有了死宽度，假如为500px，一张图为400px，那么500px的盒子怎么能装下2000px（四张图*400）的图呢？所以要将大盒子宽度改为400%。

功能一：当鼠标经过显示或者隐藏左右按钮

 //1.获取元素
    let arrow_l=document.querySelector('.arrow-l'),
        arrow_r=document.querySelector('.arrow-r'),
        focus=document.querySelector('.focus');
        //鼠标经过focus显示左右按钮
    focus.addEventListener('mouseenter',function(){
        arrow_l.style.display='block';
        arrow_r.style.display='block';
    });
    //鼠标经过focus隐藏左右按钮
    focus.addEventListener('mouseleave',function(){
        arrow_l.style.display='none';
        arrow_r.style.display='none';
    });

功能二：动态生成小圆圈

分析：
1.核心思路：小圆圈的个数要和图片的张数一致,比如以后我们想删除加入几张图片，还要去html结构中去删除结构很麻烦，所以我们应该考虑如何动态的去使小圆圈和图片个数一致
2.综合以上原因所以我们首先得到ul里面图片的张数(图片放到li里面，所以li的个数就是图片的个数)
3.利用循环动态生成小圆点(小圆点放入ol里面)
4.创建结点createElement(‘li’)
5.插入结点ol.appendCild(li)

 //动态生成小圆圈，具体生成几个完全看有几张图片
    let ul=focus.querySelector('ul');
    console.log(ul);
    let ol=this.focus.querySelector('.circle');
    console.log(ol);
    // console.log(ul.children.length);
    for(let i