var time = null;

$(".next").onclick = () => {
    motion(-520)
}


$(".prev").onclick = () => {
    motion(520)
}


// 小圆点点击事件
_(".dot li").forEach((v,i) => {
    v.onclick = function () {
        changeDot(i)
    }
});


function changeDot(index) {
    var liArr = _(".dot li")
    liArr.forEach((itme) => {
        itme.classList.remove("active")
    })
    liArr[index].classList.add("active")
    set_left(index * -520)
}


function motion(offset) {
    var totalOffset = left() + offset;
    if (totalOffset < -1040) {
        totalOffset = 0
    }
    if (totalOffset > 0) {
        totalOffset = -1040
    }
    set_left(totalOffset)
    changeDot(totalOffset / -520)
}

function autoPlay() {
    time = setInterval(() => {
        $(".next").onclick()
    }, 1000)
}

$(".main").onmouseover = () => {
    clearInterval(time)
}

// $(".main").onmouseout = () => {
//     autoPlay()
// }
//
// autoPlay()

function set_left(offset) {
    $(".swiper").style.left = `${offset}px`;
}

function left() {
    return parseInt($(".swiper").style.left)
}


function $(className) {
    return document.querySelector(className)
}

function _(className) {
    return document.querySelectorAll(className)
}