javascript实现自动切换图像功能

最新推荐文章于 2023-09-21 22:55:09 发布

棕旨

最新推荐文章于 2023-09-21 22:55:09 发布

阅读量667

点赞数

分类专栏： js笔记文章标签： js 切换图像 dom运用

本文链接：https://blog.csdn.net/m15933025112/article/details/88987019

版权

js笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!--changeimg.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动切换图像</title>
    <script type="text/javascript">
        setInterval("loadImage()",3000);//启动计时器 3秒调用
        var images =['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];//指定图像
        var i =0;       //从第一个图像开始显示
        //装载图像文件（定时器调用）
        function loadImage()
        {
            i++;
            //当显示第五个文件时再从第一个开始循环
            if(i==5)
                i=0;
            //得到Img标签
            var oImage =document.getElementById('image');
            //得到Label标签
            var oLabel =document.getElementById('info');
            //为img标签的src属性赋值
            oImage.src='../images/'+images[i];
            oLabel.innerText=images[i];     //显示当前图像的文件名
        }
    </script>
</head>
<body>
    当前图像名：<label id="info"></label>
    <p/>
    <img src="../images/01.jpg" id="image" width="586" height="390"/>
    <script type="text/javascript">
        var oLabel =document.getElementById('info');
        oLabel.innerText =images[i];
    </script>

</body>
</html>

棕旨

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javascript实现自动切换图像功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自动切换图像</title> <script type="text/javascript">...
复制链接

扫一扫