主要功能介绍：

鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止

鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始

动态创建下面的小圆点

无缝滚动效果

点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片

使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况

 1、先搭建框架，标签如下图所示

2、html和css代码如下图所示,简单写一下，重要是学习js代码

* {margin: 0;padding: 0;}div {box-sizing: border-box;}.focus {margin: 0 auto;position: relative;width: 1200px;height: 600px;background-color: pink;overflow: hidden;}ul {position: absolute;/* margin-left: 100px; */width: 8000px;height: 600px;}ul li {float: left;width: 1200px;height: 600px;background-color: purple;overflow: hidden;}img {width: 100%;}span {position: absolute;width: 60px;height: 60px;background-color: rgba(0, 0, 0, .5);color: #fff;font-size: 40px;text-align: center;line-height: 60px;top: 40%;z-index: 2;cursor: move;}.left {display: none;left: 0;}.right {display: none;left: 1138px;}ol {position: absolute;top: 550px;left: 50%;height: 40px;background-color: rgba(0, 0, 0, .2);list-style: none;transform: translate(-50%);border-radius: 20px;padding: 0 20px;}ol li {float: left;width: 20px;height: 20px;border-radius: 10px;background-color: #fff;margin-top: 10px;margin-left: 15px;}.current {background-color: orange;}
&lt&gt

    三、javascript代码如下

    赶时间直接复制版：

    window.addEventListener('load', function() {var spanLeft = document.querySelector('.left');var spanRight = document.querySelector('.right');var focus = document.querySelector('.focus');var ol = this.document.querySelector('ol');var ul = focus.querySelector('ul');// 鼠标经过focus区域，左右两边的按钮显示focus.addEventListener('mouseenter', function() {spanLeft.style.display = 'block';spanRight.style.display = 'block';// 当鼠标经过focus区域的时候，清除定时器clearInterval(timer);timer = null;});// 鼠标离开focus区域，左右两边的按钮隐藏focus.addEventListener('mouseleave', function() {spanLeft.style.display = 'none';spanRight.style.display = 'none';// 离开focus时开启定时器（这里就不用var timer 了，直接给timer赋一个函数即可）timer = setInterval(function() {// 手动调用点击事件目标对象.事件类型（）spanRight.click();}, 2000)});// 动态创建小圆圈li并将他添加到ol中for (var i = 0; i < ul.children.length; i++) {// 每循环一次，创建一个li（不能创建一个li添加多次）var li = document.createElement('li');ol.appendChild(li);// 每创建一个li就给他创建一个自定义属性li.setAttribute('index', i);// 点击的这个li（不点击不会触发，当点击时早已经生成完毕）// 点击li让ul移动相应的距离li.addEventListener('click', function() {// 排他思想for (var i = 0; i 
      li的后面，不然就会多生成一个li,影响效果var first = ul.children[0].cloneNode(true);// 将第一个li添加到ul的后面，他又在创建小圆圈的后面，所以不用多创建一个小圆圈ul.appendChild(first);// 点击一次右侧按钮，就让图片往右移动一个li的距离// 让左右按钮和ul图片移动联系起来var num = 0;// 定义一个全局变量circle，当点击左右切换按钮时，下面的小圆点也跟着动var circle = 0;// 定义一个flag变量，用节流阀来防止图片切换过快的现象var flag = true;spanRight.addEventListener('click', function() {// 点击按钮后，先让他进入if判断语句执行，进入后把路给他封上，// 再当所有的动画都执行完毕后，即用回调函数再把路给他打开if (flag) {flag = false;num++;// num是从0开始的，他最多到ul.children.length-1个，当num=(children.length-1)+1时，// 说明又得循环一次。比如有4个li，再加上克隆的，一共有5个。num最大到4（从0开始）// 当num等于5时，让他的位置迅速的到num= 0的位置（肉眼看不见的移动），此时再让num = 1，再进行// 一次动画，相当于无缝连接// 时，返回开头，从0开始无缝滚动if (num == ul.children.length) {ul.style.left = 0;num = 1;}// 添加回调函数，等动画都执行完毕再执行回调函数即让他可以点击按钮，切换图片animate(ul, -num * focus.offsetWidth, function() {flag = true;});// 先++，因为点击后切换到第二个li，给第二个小圆点current才行// 让左右按钮和下面的小圆圈联系起来circle++;// 排他思想for (var i = 0; i 
         无缝滚动原理spanLeft.addEventListener('click', function() {if (flag) {num--;if (num == -1) {// 当num= -1时，让ul迅速到达第5图，即num= 4时ul.children.length - 1// 再让他往前做一次动画------->无缝连接ul.style.left = -(ul.children.length - 1) * focus.offsetWidth;num = ul.children.length - 2;}animate(ul, -num * focus.offsetWidth, function() {flag = true;});circle--;// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}if (circle == -1) {circle = ol.children.length - 1;}ol.children[circle].className = 'current';}})// 自动播放轮播图var timer = this.setInterval(function() {// 手动调用点击事件目标对象.事件类型（）spanRight.click();}, 1000);})

    详细解析版：

    1、 鼠标经过focus区域，左右两边的按钮显示

           鼠标离开focus区域，左右两边的按钮隐藏

    这一块不是很难，当你想要做轮播图的时候，这就已经很简单了。

    window.addEventListener('load', function() {var spanLeft = document.querySelector('.left');var spanRight = document.querySelector('.right');var focus = document.querySelector('.focus');// 鼠标经过focus区域，左右两边的按钮显示focus.addEventListener('mouseenter', function() {spanLeft.style.display = 'block';spanRight.style.display = 'block'; });// 鼠标离开focus区域，左右两边的按钮隐藏focus.addEventListener('mouseleave', function() {spanLeft.style.display = 'none';spanRight.style.display = 'none'; });

    2、动态创建小圆圈li并将他添加到ol中（ol中的小圆圈的数目不能固定，所以要动态添加）

    //获取小圆圈的ol和轮播图中的ulvar ol = this.document.querySelector('ol');var ul = focus.querySelector('ul');for (var i = 0; i < ul.children.length; i++) {// 每循环一次，创建一个li（不能创建一个li添加多次）var li = document.createElement('li');ol.appendChild(li);}// 先给ol里面的第一个小圆圈一个current属性，让圆圈不点击情况下，默认颜色为橘色ol.children[0].className = 'current';

     3、点击下方的小圆圈，就切换图片（实质是让ul移动相应的距离），当前小圆点的颜色也改变

    注意：这个操作可以在上述操作中进行，这步操作在点击之后才会运行，当你点击时,上述操作早已经执行完毕

     //获取小圆圈的ol和轮播图中的ulvar ol = this.document.querySelector('ol');var ul = focus.querySelector('ul');for (var i = 0; i < ul.children.length; i++) {// 每循环一次，创建一个li（不能创建一个li添加多次）var li = document.createElement('li');ol.appendChild(li);// 每创建一个li就给他创建一个自定义属性li.setAttribute('index', i);// 点击的这个li（不点击不会触发，当点击时上述早已经生成完毕）// 点击li让ul移动相应的距离li.addEventListener('click', function() {// 排他思想，让所有的li的className全消失，让当前的classname出现for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}this.className = 'current';// 获取被点击li的自定义属性index的值var index = this.getAttribute('index');animate(ul, -index * focus.offsetWidth);});}

    4、为了实现无缝连接，需要深度克隆第一li并将它放到ul最后面的位置

    深度克隆：var  first = li.cloneNode(true);

    在元素后添加：父级.appendChild(子级)；

    ol.children[0].className = 'current';// 深度克隆第一个li，为了实现动态的无缝连接// 克隆的放到生成ol>li的后面，不然就会多生成一个li,影响效果var first = ul.children[0].cloneNode(true);// 将第一个li添加到ul的后面，他又在创建小圆圈的后面，所以不用多创建一个小圆圈ul.appendChild(first);

    5、点击左右按钮实现图片的切换效果

    // 定义一个flag变量，用节流阀来防止图片切换过快的现象var flag = true;spanRight.addEventListener('click', function() {// 点击按钮后，先让他进入if判断语句执行，进入后把路给他封上，// 再当所有的动画都执行完毕后，即用回调函数再把路给他打开if (flag) {flag = false;num++;// num是从0开始的，他最多到ul.children.length-1个，当num=(children.length-1)+1时，// 说明又得循环一次。比如有4个li，再加上克隆的，一共有5个。num最大到4（从0开始）// 当num等于5时，让他的位置迅速的到num= 0的位置（肉眼看不见的移动），此时再让num = 1，再进行// 一次动画，相当于无缝连接// 时，返回开头，从0开始无缝滚动if (num == ul.children.length) {ul.style.left = 0;num = 1;}// 添加回调函数，等动画都执行完毕再执行回调函数即让他可以点击按钮，切换图片animate(ul, -num * focus.offsetWidth, function() {flag = true;});// 先++，因为点击后切换到第二个li，给第二个小圆点current才行// 让左右按钮和下面的小圆圈联系起来circle++;// 排他思想for (var i = 0; i 
       无缝滚动原理spanLeft.addEventListener('click', function() {if (flag) {num--;if (num == -1) {// 当num= -1时，让ul迅速到达第5图，即num= 4时ul.children.length - 1// 再让他往前做一次动画------->无缝连接ul.style.left = -(ul.children.length - 1) * focus.offsetWidth;num = ul.children.length - 2;}animate(ul, -num * focus.offsetWidth, function() {flag = true;});circle--;// 排他思想for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}if (circle == -1) {circle = ol.children.length - 1;}ol.children[circle].className = 'current';}})

     

     6、创建定时器实现自己滚动

    // 自动播放轮播图var timer = this.setInterval(function() {// 手动调用点击事件目标对象.事件类型（）spanRight.click();}, 1000);

    7、当鼠标放到focus时，清除定时器。当鼠标移开focus时，创建定时器。

    这一步是在第一步的基础上完成的

    // 鼠标经过focus区域，左右两边的按钮显示focus.addEventListener('mouseenter', function() {spanLeft.style.display = 'block';spanRight.style.display = 'block';// 当鼠标经过focus区域的时候，清除定时器clearInterval(timer);timer = null;});// 鼠标离开focus区域，左右两边的按钮隐藏focus.addEventListener('mouseleave', function() {spanLeft.style.display = 'none';spanRight.style.display = 'none';// 离开focus时开启定时器（这里就不用var timer 了，直接给timer赋一个函数即可）timer = setInterval(function() {// 手动调用点击事件目标对象.事件类型（）spanRight.click();}, 2000)});

    8、让几个步骤联系起来

    // 当我们点击了某个li时，就把这个li的索引值index给num// 让点击的小圆圈和点击左右按钮移动图片联系起来//不然，如果点击第三个小圆圈，下面的小圆点到第三个，再点击右按钮，// 他又会按照点击右按钮的算法，给num赋值为2，让小圆点到第二个上去num = index;// 当我们点击了某个li时，就把这个li的索引值index给circle// 让点击的小圆圈和点击左右按钮,下面的小圆点也跟着动联系起来circle = index;// 注意ul没有position:absolute；就不能移动，原理就是靠改变绝对定位的值来改变位置的