轮播图的原理：

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

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

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

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

e、自动轮播原理：
设置定时器，一定时间间隔后，将照片标记加1，然后开始切换。

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

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

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

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

js内容如下

<script>
var time=5000;
let content = document.querySelector('.banner-imgBox2');
let switchBtn = document.querySelector('.banner-imgBox-div');
switchBtn.children[0].classList.add('on2');
let index=0;
let x=0;
function marginLeft(right) {
if(right){
switchBtn.children[index].classList.remove('on2');
if(index==switchBtn.children.length-1){
index=0;
content.innerHTML+=content.innerHTML;
x++;
}else {
index++;
x++;
}
switchBtn.children[index].classList.add('on2');
content.style.marginLeft=x*-1895+"px"
}else{
switchBtn.children[index].classList.remove('on2');
if(index==0){
index=switchBtn.children.length-1;
if(x==0){
x=0
}else{
x--;
}
}else {
index--;
x--;
}
switchBtn.children[index].classList.add('on2');
content.style.marginLeft=x*-1895+"px"
}

}

var interval = setInterval(() => {
marginLeft(true)
}, time);

let container = document.querySelector('.banner-imgBox');
// 鼠标经过时清除定时器
container.onmouseover = function () {
clearInterval(interval);
}
// 鼠标移开时设置定时器
container.onmouseout = function () {
// 先清除定时器
clearInterval(interval);
// 往右滑动并开启定时器
// marginLeft(true)
interval = setInterval(() => {
marginLeft(true)
}, time);
}
</script>