web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

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

490 ℃
     
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://ipkd.cn/webs_59.html

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

当前位置: 网站首页 > js
本文共计930个字,预计阅读时长7分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款由字制区设计团队的免费综艺字体——字制区喜脉体
下一篇: 推荐一款免费开源的跨平台MarkDown编辑器——Mark Text
x 打工人ai神器