轮播图

// 获取
var ui = document.querySelectorAll('ul li')
var oi = document.querySelectorAll('ol li')
var left = document.getElementById('left')
var right = document.getElementById('right')
var box = document.getElementsByClassName('box')[0];
// 定时器和下标
var timer = null
var index = 0;
// 封装自动播放函数
function zidong() {
    if (index >= ui.length) {
        index = 0;
    }
   
    for (var i = 0; i < ui.length; i++) {
        ui[i].classList.remove('active');
        oi[i].classList.remove('active');
    }
    console.log(index)
    ui[index].classList.add('active');
    oi[index].classList.add('active');
}
// 左右点击事件


right.onclick = function () {//点击右边按钮，轮播图下标增加，更换图片
    right.onmousedown =function(){
        right.style = 'background: blue;color: black;'
    }
    right.onmouseup =function(){
        right.style = ' background: rgba(33, 55, 77, 0.3);color: aliceblue;'
    }
    index++;
    
    zidong()
}
timer = setInterval(function () {//定时器，放入轮播图
    index++;
    zidong()
}, 1000)
box.onmouseenter = function () {//鼠标移入，停止轮播图
    clearInterval(timer);
    timer = null;
}
box.onmouseleave = function () {//鼠标移出，开始轮播图
    timer = setInterval(function () {
        index++;
        zidong()
    }, 1000)
}

for (var j = 0; j < oi.length; j++) {//点击下方图片导航，切换图片
    oi[j].ind = j;
    oi[j].onclick = function () {
        index = this.ind;
       zidong(index)
    }
}
left.onclick = function(){//点击左边按钮，轮播图下标减少，更换图片
    left.onmousedown =function(){
        left.style = 'background: blue;color: black;'
    }
    left.onmouseup =function(){
        left.style = ' background: rgba(33, 55, 77, 0.3);color: aliceblue;'
    }
    index -- ;
    if(index<0){//判断，当下标走到0时，回到最后一张图片，重新开始
        index = ui.length-1
    }
   zidong()
}