轮播图的实现及步骤讲解

轮播图设计的原理及思路
首先在写好css之后 我们要对接下来的js进行一个分步操作
第一步，我们可以先写好一个自动播放的逻辑：
这部分我们用的方法就是 采用图片作为背景图片，在js里边通过索引来实现图片的切换
第二步，我们要实现一些简单的细节，当我们的鼠标放上去的时候，我们希望这个时候箭头显示，并且当前的自动播放停止，当鼠标移走的时候，箭头也就随之隐藏，这部分很容易实现，我们只需要在鼠标放在上边的时候，通过清除定时器clearInterval（）
鼠标移走的时候，我们可以重新启用定时器，这时我们为了方便操作，我们把自动播放写成一个函数，方便我们在重新需要使用的时候调用方便。
第三步，相对来说，也是稍微有一点难度，需要为每一个小圆点绑定一个鼠标放上去的处理程序，我们通过for循环遍历小圆点，当鼠标放到小圆点的时候清除当前的样式，之后在被鼠标放上的小圆点添加active样式
此时较为重要的东西来了，小圆点移动之后，我们需要让图片也要跟着移动，怎么才能实现这样的效果呢？大多数人对于这个点都会
有点模糊，进而觉得有难度，其实不然，只要我们仔细思考一下问题就会迎刃而解
我们在html文件中加入data-id，将每一个小圆点设置一个索引号，为了方便我们后续引用调取他的值
parseInt(this.getAttribute(‘data-id’)); 通过这种方法 获取到小圆点此时的索引，并将它赋值给当前的
current，然后我们让背景显示为获取到的这个索引的对应图片，xxx.style.backgroundImage = “url(’”+ urls[current] +"’)";
这样我们就轻松实现了 小圆点的跳转对应图片的跳转
第四步 就是一些细节的完善，我们需要在点击按钮的时候，图片会随着滚动，就是两个简单的点击事件，一个是左边的按钮，一个是右边的按钮
点击事件就需要注意两个问题 向左播放点击的时候，我们要判断当下一张
图片是第一张的时候 ，接下来在点击的时候，我们就要让next=图片的长度减1
接下来就是根据索引的变化，清除当前的样式，设置next的样式，改变背景图片
当前样式更新
右边的按钮点击事件是一样的，不同的是判断最后一张图片的时候，下一张要