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图片轮播，复制代码保存为网页即可看到效果。如有错误和不足之处，欢迎指正　

来源：oschina

链接：https://my.oschina.net/u/4367530/blog/3225047

标签

tulip

javascript

Solid

highlighter

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!