var pagination = _(".swiper-pagination .swiper-pagination-item");
var timer;
//上一页
$(".swiper-button-prev").onclick = function() {
    motion(520, 'prev')
}

//下一页
$(".swiper-button-next").onclick = function() {
    motion(-520, 'next')
}

function motion(offset, type) {
    if (translateX() == -1560) {
        $(".swiper-wrapper").classList.remove("dh")
        SetTranslateX(0)
    }

    setTimeout(() => {
        $(".swiper-wrapper").classList.add("dh")
        var totalDistance = translateX() + offset;
        if (totalDistance < -1560) {
            totalDistance = 0
        }

        if (totalDistance > 0) {
            totalDistance = -1560
        }

        var index = Math.abs(totalDistance / 520)
        console.log(index)
        if (index == 3) {
            if (type == "next") {
                index = 0
                changePagination(index)
                SetTranslateX(totalDistance)
            } else {
                $(".swiper-wrapper").classList.remove("dh")
                SetTranslateX(-1560)
                setTimeout(() => {
                    totalDistance = -1040
                    $(".swiper-wrapper").classList.add("dh")
                    index = 2
                    changePagination(index)
                    SetTranslateX(totalDistance)
                }, 100)
            }
        } else {
            changePagination(index)
            SetTranslateX(totalDistance)
        }
    }, 100)

}


pagination.forEach((v, i) => {
    v.onclick = () => {
        changePagination(i)
    }
});

function changePagination(i) {
    pagination.forEach(item => item.classList.remove("active"))
    pagination[i].classList.add("active")
    SetTranslateX(i * -520)
}

//让图片移动
function SetTranslateX(distance) {
    $(".swiper-wrapper").style.transform = `translateX(${distance}px)`
}

function translateX() {
    return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
}

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

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