輪播圖的原理：
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>