JavaWeb——【前端】——JS实现自动换图

最新推荐文章于 2024-03-21 04:31:01 发布

狮子座的程序员

最新推荐文章于 2024-03-21 04:31:01 发布

阅读量1k

点赞数

分类专栏： # Web前端

本文链接：https://blog.csdn.net/weixin_42247720/article/details/104861626

版权

Web前端专栏收录该内容

28 篇文章 5 订阅

订阅专栏

效果展示

每隔2s自动换图
在这里插入图片描述

实现代码

纯html+js

<html>
<head> <title>hello</title>
    <script  type="text/javaScript">
        //图片的序号，初始为0
        var  i=0;
        //设置图片集合
        var  imgsurl=new  Array();
        //添加图片名称信息
        imgsurl[0]="tt1.jpg";
        imgsurl[1]="tt2.jpg";
        imgsurl[2]="tt3.jpg";
        imgsurl[3]="tt4.jpg";
        //更改图片函数
        function changePicture(){
            setInterval("changeimg()",2000);
        }
        //换图函数
        function changeimg(){
            //更改img的src属性
            document.getElementById("img1").src=imgsurl[i];
            //序号+1
            i++;
            //如果序号=4，循环变为0
            if(i==4){
                i=0;
            }
        }
    </script>
</head>
<body  onload="changePicture()">
<img  id="img1"></img>
</body>
</html>

总结

自动换图利用js的setInterval方法来设置休眠时间

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

狮子座的程序员

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb——【前端】——JS实现自动换图

效果展示每隔2s自动换图实现代码纯html+js<html><head> <title>hello</title> <script type="text/javaScript"> //图片的序号，初始为0 var i=0; //设置图片集合 var ...
复制链接

扫一扫