JavaScript,定时器制作自动轮播切换图片效果

1.设置定时器，改变索引值（设索引值为loop） 

2.定时器每循环一次索引加1，loop += 1，取余保证循环轮播，loop %= 10

3.设置下标为loop的className为current,下标为loop的数组图片的display = "block";

 window.addEventListener("load", function(){
        //1.获取标签
        var lis = document.getElementsByTagName("li");
        var imgs = document.getElementsByTagName("img");
        var box = document.getElementById("box");

        //2.索引
        var loop = 0;
        //定时器名称
        var inter = null;

        //3.设置定时器,
        inter = setInterval(function () {
            //3.1排他，清除掉所有li的className,所有img的dispaly设置为none
            for(var i = 0; i < lis.length; i++){
                lis[i].className = "";
                imgs[i].style.display = "none";

            }

            //3.2设置当前索引下li的className,img的display
            lis[loop].className = "current";
            imgs[loop].style.display = "block";

            //3.3更改索引
            console.log(loop);
            loop += 1;
            loop %= 10; //10%10 = 0 11%10 = 1  塑造循环下标

        }, 1000);

       
        };


    });

</script>