js 图片轮播简单版

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            window.onload=function(){
                setInterval("rollImg()",2000);
            }
            var imgarr=["https://www.w3school.com.cn/i/eg_tulip.jpg",
"https://www.w3school.com.cn/i/eg_chinarose.jpg",
        "https://www.runoob.com/images/pulpit.jpg"]
            var i = 1;
            function rollImg(){
                i++;
                if(i == 4){
                    i = 1;
                }
                var img_id = document.getElementById("img_id");
                img_id.src= imgarr[i-1];
            }
        </script>
    </head>
    <body>
        <center>
            <div style="width: 1200px; height: 800px; border: 5px solid purple; overflow: hidden;">
                <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" id="img_id"/>
            </div>
        </center>
    </body>
</html>

　这是简单的原生js图片轮播，复制代码保存为网页即可看到效果。如有错误和不足之处，欢迎指正　

赞 (0)

相关推荐