var timer;
var LiArr = document.querySelectorAll(".yd li");

$(".dh_right").onclick = function () {
    OffSetDistance(-520)
    changeYd()
}

$(".dh_left").onclick = function () {
    OffSetDistance(520)
    changeYd()
}

function OffSetDistance(nums) {
    var Offset = parseInt($(".lb_img").style.left) + nums;
    $(".lb_img").style.left = `${Offset}px`
    
    if (Offset <  -1040) {
        console.log("没有")
        $(".lb_img").style.left = "0px";
    }

    if (Offset > 0) {
        $(".lb_img").style.left = "-1040px";
    }
}

function changeYd() {
    var index = Math.abs(parseInt($(".lb_img").style.left)) / 520;
    LiArr.forEach(function(val){
        val.className = ""
    })
    LiArr[index].className = "active"
}

function BindYdClick() {
    LiArr.forEach(function(val,index){
        val.onclick = function () {
            LiArr.forEach(function(v){
                v.className = ""
            })
            val.className = "active"
            $(".lb_img").style.left = `${index * -520}px`;
        }
    })
}

$(".main").onmouseover = function () {
    clearInterval(timer)
}

$(".main").onmouseout = function () {
    autoPlay()
}

function autoPlay() {
    timer = setInterval( function(){
        OffSetDistance(-520)
        changeYd()
        // $(".dh_right").onclick()
    }, 1000 )
}

autoPlay()
BindYdClick()

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