当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js 图片轮播简单版

js 图片轮播简单版

2020年04月08日  | 移动技术网IT编程  | 我要评论 
<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图片轮播，复制代码保存为网页即可看到效果。如有错误和不足之处，欢迎指正　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网