JS实现手动和自动轮播效果

<div class="wrap">
    <div class="pic">
        <!--上一页-->
        <a id="prev" href="javascript:;"></a>
        <!--轮播图-->
        <img id="img" src="img/img1.jpg" alt="">
        <!--小圆点-->
        <div class="circle">
            <span class="active"></span>
        </div>
        <!--下一页-->
        <a id="next" href="javascript:;"></a>
    </div>
    <p id="txt">这是第 <span>1</span> 张图片</p>
</div>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
.wrap{
    width: 1000px;
    height: 800px;
    background: url(img/bg.jpg) no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-size: 100% 100%;
}
#prev,#next{
    position: absolute;
    width: 25px;
    height: 45px;
    background: url(img/ar.png) no-repeat;
    top: 155px;
}
#prev{
    left: 13px;
}
#next{
    transform: rotate(180deg);
    right: 13px;
}
.pic{
    width: 536px;
    height: 356px;
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
}
img{
    vertical-align: top;
    width: 536px;
    height: 356px;
}
#txt{
    width: 536px;
    height: 71px;
    position: absolute;
    left: 50%;
    bottom: 185px;
    text-align: center;
    font: 20px/71px "微软雅黑";
    color: #666;
    transform: translateX(-50%);
}
.circle{
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.circle span{
    border: 1px solid #fff;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}
.circle span.active{
    background-color: #fff;
}

let pic = document.querySelector('.pic');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');
let txt = document.querySelector('#txt span');
//轮播图数组
let arr = ['img/img1.jpg','img/abc.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
let num = 0 ;
let circle = document.querySelector('.circle');
let img = document.querySelector('#img');
let timer = null;

//渲染轮播图上的小圆点
for(let i = 0;i<arr.length-1;i++){
    circle.innerHTML+=`<span></span>`
}
let circleAll = document.querySelectorAll('.circle span');

//轮播函数
let loop = (addNum,flag)=>{
    num = num+addNum;
    if(flag){
        if(num == arr.length){
            num = 0;
        }
    }else{
        if(num < 0){
            num =  arr.length-1;
        }
    }
    for(let i = 0;i<circleAll.length;i++){
        circleAll[i].classList.remove('active');
    }
    circleAll[num].classList.add('active');
    img.src = arr[num];
    txt.innerHTML= num+1;
};

//定时器
let auto = ()=>{
    timer = setInterval(()=>{
        let addNum =1;
        let flag = true;
        loop(addNum,flag);
    },1000);
};
//进入页面时自动轮播
auto();

//鼠标移入清除定时器
pic.onmouseover=function () {
    clearInterval(timer);
};
//鼠标移出启动定时器
pic.onmouseout =function () {
    auto();
};

//下一张
next.onclick = function () {
    let addNum = 1;
    let flag = true;
    loop(addNum,flag);
};
//上一张
prev.onclick = function () {
    let addNum = -1;
    let flag = false;
    loop(addNum,flag);
};

//点击圆点切换图片
circleAll.forEach((item,index)=>{
    item.onclick=function () {
        img.src = arr[index];
        txt.innerHTML= index+1;
        for(let i = 0;i<circleAll.length;i++){
            circleAll[i].classList.remove('active');
        }
        circleAll[index].classList.add('active');
        //num赋值为index,使鼠标移出后图片播放从当前的图片开始继续自动轮播
         num = index;
    }

})