JS轮播图

window.onload = function(){
    var container = document.getElementById("container");
    var list = document.getElementById("list");
    var next = document.getElementById("next");
    var prev = document.getElementById("prev");
    var btns = document.getElementById("btns").children;
    var index = 0;
    var timer;
    next.onclick = function(){
        if(animated){
            return false;
        }
        animate(-600);
        index++;
        showBtn();
        console.log(index);
        
    }
    prev.onclick = function(){
        if(animated){
            return false;
        }
        animate(600);
        index--;
        showBtn();
    }
    for(let i=0; i<btns.length; i++){
        btns[i].onclick = function(){
            index = i;
            let newLeft = -600 + (i-0)*(-600);
            list.style.left = newLeft + "px";
            list.style.transition = "300ms ease";
            showBtn();
            console.log(index);
        }

        // btns[i].index = i;
        // btns[i].onclick = function(){
        //     let offset = (this.index-index)*(-600);
        //     console.log("index："+index); 
        //     animate(offset);
        //     index = this.index;
        //     showBtn();
        //     console.log("thisindex："+this.index);
        //     console.log("i："+i);
        //     console.log("offset："+offset);
        // }
    }
    function animate(offset){
        let newLeft = parseInt(list.style.left) + offset;
        console.log(list.style.left);
        console.log(newLeft);
        list.style.transition = "300ms ease";
        list.style.left = newLeft + "px";
        if(newLeft<-3000){
            list.style.left = "-600px";
        }
        if(newLeft>-600){
            list.style.left = "-3000px";
        }
    }
    var animated = false;
    function animate(offset){
        let newLeft = parseInt(list.style.left) + offset;  //设定要偏移的距离
        var timer = 300;  //偏移一次总共用时300ms
        var interval = 10;  //偏移一次中分10小次
        var speed = offset / (timer / interval);  //每次偏移的速度 20
        function go(){
            animated = true;  //动画开始
            var leftValue = parseInt(list.style.left);  //目前left的值
            if((speed<0 && leftValue>newLeft) || (speed>0 && leftValue<newLeft)){
                //如果速度小于0(向左偏移),并且此时left的值大于设定偏移的距离
                //或者如果速度大于0(向右偏移),并且此时left的值小于设定偏移的距离
                list.style.left = leftValue + speed + "px";
                //list的left等于当前left的值+20
                console.log("leftValue："+leftValue);
                console.log("newLeft："+newLeft);
                setTimeout(go, interval);  //每隔10ms执行一次go(偏移20px)
            }
            else {  //当left的值等于偏移距离时，animated的值为false
                animated = false;  //当left的值等于偏移距离时，animated=false表示动画停止
                if(newLeft>-600){
                    list.style.left = -3000 + "px";
                }else if(newLeft<-3000){
                    list.style.left = -600 + "px";
                }else{
                    list.style.left = newLeft + "px";
                }
            }
        }
        go();
    }
    function showBtn(){
        for(let i=0; i<btns.length; i++){
            btns[i].classList.remove("current");
        }
        if(index>4){
            index = 0;
        }else if(index<0){
            index = 4;
        }
        btns[index].classList.add("current");
    }
    function autoplay(){
        timer = setInterval(function(){
            next.onclick();
        }, 1000);
    }
    function stopplay(){
        clearInterval(timer);
    }
    autoplay();
    container.onmouseover = stopplay;
    container.onmouseout = autoplay;
}