原生JS最简单实现图片flash循环切换

927 ℃
HTML代码
<div>
    <div id="div1" style="display:block;"><img src="images/1.png" /></div>
    <div id="div2" style="display:none;"><img src="images/2.png" /></div>
    <div id="div3" style="display:none;"><img src="images/3.png" /></div>
    <div id="div4" style="display:none;"><img src="images/4.png" /></div>
    <div id="div5" style="display:none;"><img src="images/5.png" /></div>
    <div id="div6" style="display:none;"><img src="images/6.png" /></div>
    <div id="div7" style="display:none;"><img src="images/7.png" /></div>
</div>

JS代码
var NowImg=1;//表示当前显示的div
var MaxImg=7;//表示div的个数

setInterval(function(){
        //#通过更改元素的display属性来设置显示的图片
    for(var i=1;i<=MaxImg;i++){
        if(NowImg==i)
            document.getElementById("div"+NowImg).style.display='block';//当前显示的div
        else
            document.getElementById("div"+i).style.display='none';
    }
    if(NowImg==MaxImg)//判断当前div是否是最后一个,如果是则从第一个重新轮回显示
        NowImg=1;
    else
        NowImg++;//设置下一个显示的图片
},2000)

原生js如何判断图片是否存在

原生JS如果只关闭手机浏览器中弹出提示框

原生JS如何生成一个表格(根据数据生成表格)

flv.js是什么插件,基本语法介绍

原生js使用es6引入import报错解决方法

标签: flash, 原生js

上面是“原生JS最简单实现图片flash循环切换”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_59.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

Trae:新一代免费的AI编程工具
一张图带你了解JS的各种循环遍历方法
伪原创文章有用吗?伪原创的价值在哪里(浅谈伪
ios系统内容滚动条卡住怎么解决
h5页面唤起打电话(纯h5、app嵌套、浙里办app)
javascript如何获取元素并修改元素属性