原生js实现轮播图原理分析

一、轮播图需求

• 轮播图需要实现左右翻页的无缝连接
• 需要点击左右切换
• 需要实现跳转
• 显示当前位置的小圆点

二、轮播图的原理

1.图片移动实现原理：

利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。

2.图片移动动画原理：

从a位置移动到b位置，需要先计算两点之间的差值，通过差值和时间间隔，计算出每次移动的步长，通过添加定时器，每次移动相同的步长，实现动画效果。

3.图片定位停止原理：

每一张照片都有相同的宽度，每张照片都有一个绝对的定位数值，通过检测定每次移动后，照片当前位置和需要到达位置之间的距离是否小于步长，如果小于，说明已经移动到位，可以将定时器清除，来停止动画。

4图片切换原理：

在全局设置一个变量，记录当前图片的位置，每次切换或跳转时，只需要将数值修改，并调用图片页数转像素位置函数，再调用像素运动函数即可。

5.自动轮播原理：

设置定时器，一定时间间隔后，将照片标记加1，然后开始切换。

6.左右点击切换原理：

修改当前位置标记，开始切换。这里需要注意与自动轮播之间的冲突。当点击事件触发之后，停止自动轮播计时器，开始切换。当动画结束后再次添加自动轮播计时器。

7.无缝衔接原理：

需要无缝衔接，难度在于最后一页向后翻到第一页，和第一页向前翻到最后一页。由于图片的基本移动原理。要想实现无缝衔接，两张图片就必须紧贴在一起。所以在第一张的前面需要添加最后一张，最后一张的后面需要添加第一张。

7.预防鬼畜原理：

始终保证轮播图的运动动画只有一个，从底层杜绝鬼畜。需要在每次动画开始之前，尝试停止动画定时器，然后开始为新的动画添加定时器。

8.预防暴力点击原理：

如果用户快速点击触发事件，会在短时间内多次调用切换函数，虽然动画函数可以保证，不会发生鬼畜，但在照片从最后一张到第一张的切换过程，不会按照正常的轮播，而是实现了跳转。所以需要通过添加口令的方式来，限制用户的点击。当用户点击完成后，口令销毁，动画结束后恢复口令。

9.小圆点的位置显示原理：

每次触发动画时，通过全局变量标记，获取当前页数，操作清除所有小圆点，然后指定一页添加样式。

10.点击触发跳转的原理：

类似于左右点击触发，只是这是将全局页面标记，直接修改，后执行动画。需要避免与自动轮播定时器的冲突。

三、技术细节的实现

1.无缝切换

if(Math.abs(y - parseInt(show.style.left)) < Math.abs(step)){
    show.style.left = y +"px";
    if(num == 6) {
        show.style.left = "-690px";
    }
    if(num == 0) {
        show.style.left = "-3450px";
    }
}

首先判断图片的位置，是否移动到位。当满足当前位置，与预定位置之间的距离小于一步时，认定为移动到位，并把图片直接定位到预定位置。然后判断，图片的位置是否需要跳转。
ps：这里一定要在图片运动函数结束后，在进行跳转。

2.预防鬼畜

 try{clearInterval(timer);
    }catch{}

 step = (y-x)/100;
 var timer = setInterval(function(){
     show.style.left = parseInt(show.style.left) + step +"px";
     if(Math.abs(y - parseInt(show.style.left)) < Math.abs(step)){
         show.style.left = y +"px";
         clearInterval(timer);
     }
 },1);

轮播图鬼畜的本质原因就是，同一时间多个定时器添加在图片上，这些定时器直接相互冲突，造成图片的抖动。
解决方法：每次执行运动函数之前，先尝试清除一下，上一个轮播图的定时器。确保同时触发运动函数时，只有一个定时器在工作。

四、相关代码

github：https://github.com/bigengbuchuo/Sowingmap/blob/master/index.js