JS 简易轮播图

css样式

 <style>
        #box {
            width: 400px;
            height: 400px;
            margin: 30px auto;
        }

        #box img {
            width: 400px;
            height: 400px;
            display: none;
        }
    </style>

内容

<div id="box">
        <img src="./img/1.png" style="display: block;" alt="">
        <img src="./img/2.png" alt="">
        <img src="./img/3.png" alt="">
        <img src="./img/4.png" alt="">
    </div>

js代码

 var num = 0; //轮播图下标
        var imgs = document.getElementsByTagName("img");
        // 自动切换函数
        function changeSlide() {
            num++;
            if (num > 3) { //当下标大于3 回到第一张0的下标
                num = 0;
            }
            // 所有的图片都消失  
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.display = "none"
            }
            // 当前下标的图片显示
            imgs[num].style.display = "block";
        }
        // 定时器每隔2s调用切换函数
        setInterval(function () {
            changeSlide();
        }, 1110)