原生js制作PC端轮播图

功能分析

1.鼠标经过离开轮播图左右按钮显示隐藏
2.点击左侧按钮图片向左播放一张，右边同理
3.图片播放同时，下面的小圆圈也跟着变化
4.点击小圆圈，播放相应的图片
5.鼠标不经过轮播图，轮播图自动播放
6.鼠标经过轮播图，自动播放停止
HTML标签的结构及css样式

	<div class="box">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
            <
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">
            >
        </a>

        <!-- 核心滚动区域 -->
        <ul>
            <li>
                <a href="#"><img src="./2-3-1.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./2-3-2.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./2-3-3.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./2-3-4.png" alt=""></a>
            </li>
           
        </ul>

        <!-- 小圆圈 -->
        <ol class="circle">
          
        </ol>
    </div>

将li标签浮动成一排在ul中，因为要用到缓动画函数，ul需要绝对定位到box大盒子的最左侧。

运动原理以三张图为例

绿色的框是box盒子（也就是我们看到的视图），ul定位到绿色盒子的最左边，li排成一排在ul上

轮播图的动画实现依赖于封装好的缓动画函数，详见上一个博客

功能实现

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

添加鼠标经过事件并且利用display实现显示隐藏

arrow_l.style.display = ‘block’;
arrow_r.style.display = ‘block’;

2.点击左侧按钮图片向左播放一张，右边同理

左右按钮添加点击事件

声明一个变量num，点击向右按钮一次就自增一次，向左则自减，这个变量乘于图片的宽度就是ul移动的距离

利用offsetWidth获取盒子（既图片）的宽度（这个变量要是全局变量，因为后面也有用）

var boxWidth = box.children[2].children[0].children[0].children[0].offsetWidth;

图片无缝滚动的原理

• 把ul的第一个li复制放到ul的最后面
• 当图片滚动到克隆的最后一张图片时，让ul快速的不做动画的移动到最左侧，left = 0;
• 同时num赋值为0，这样又可以重新开始滚动图片了
• 当图片在第一张点击向左按钮时，让ul快速的不做动画的移动到最后一张，然后最后一张移到倒数第二张做动画

节流阀

防止轮播图按钮连续点击导致播放过快
目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
实现思路：利用回调函数。添加一个变量来控制，锁住跟解锁函数

 // 6.克隆第一张图片(li)放到ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
 // 7.点击右侧安妮， 图片就滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    //flag  节流阀
    var flag = true;
    arrow_r.addEventListener('click' ,function() {

        if(flag) {
            flag = false;  //关闭节流阀
            // 如果走到了最后复制的一张图片，此时我们的ul 要快速复原 left 改为0
            if(num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num*boxWidth, function() {
                flag = true;  //打开节流阀
            });
            //点击右侧按钮，小圆圈跟随一起变化，可以先声明一个变量控制小圆圈额播放
            circle++;
            if(circle == ul.children.length - 1) {   //说明走到了最后我们克隆的这张图片了
                circle = 0;
            }        
            // 调用函数
            circleChang();
        }
    });

    // 左侧按钮做法
    arrow_l.addEventListener('click' ,function() {
       if(flag = true) {
        flag = false;   //关闭节流阀
         // 如果是第一张图片，则此时快速移动到最后一张
        if(num == 0) {
            num = ul.children.length-1; 
            ul.style.left = -num * boxWidth + 'px';   
        } 
             num--;
             animate(ul, -num*boxWidth, function() {
                flag = true;  //打开节流阀
            });
        
        //点击左侧按钮，小圆圈跟随一起变化，可以先声明一个变量控制小圆圈额播放
        circle--;
        // 如果circle < 0 说明第一张图片，则小圆圈要改成第四个小圆圈（3）
        circle = circle < 0 ? ol.children.length - 1 : circle;
        // 调用函数
        circleChang();
       }
    });

3.图片播放同时，下面的小圆圈也跟着变化
4.点击小圆圈，播放相应的图片

动态生成小圆圈并绑定经过事件

定义一个circle变量，初始化为0，每次向右点击自增，向左点击自减
封装一个circhange函数，以‘干掉别人，留下自己’的思想实现小圆圈的动态变化

  // 动态生成小圆圈  有几张图片，我们就生成几个小圆圈
    var ul = box.querySelector('ul');
    var ol = box.querySelector('.circle');
    // console.log(ul.children.length);  li的个数
    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('mouseover',function() {
            //干掉所有人(清除所有小li的类名)   
            for(var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己
            this.className = 'current';

            //5.点击小圆圈移动图片  当然移动的是ul
            // ul的移动距离就是小圆圈的索引号乘上图片的宽度  注意是负值
            // 当我们点击某个小li 就拿到当前小li 的索引号
            var index = this.getAttribute('index');

            //当我们点击了某个小li，就要把这个li的索引号给num
            num = index;
            //当我们点击了某个小li，就要把这个li的索引号给circle
            circle = index;
           animate(ul, -index*boxWidth);
        })
    }

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

利用定时器来实现每段时间执行一次函数，这里直接手动执行点击右侧按钮这个函数就行了

手动调用事件

arrow_r.click();

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

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

鼠标离开事件清除定时器

box.addEventListener('mouseenter',function() {
        // 关闭定时器
        clearInterval(timer);
        timer = null;   //清除定时器变量
    })

以上。