JavaScript实现背景自动切换小案例


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了js实现背景自动切换的具体代码,供大家参考,具体内容如下

JavaScript实现背景自动切换小案例

功能:

窗口打开背景图自动跳转切换

所有代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>背景切换</title>
</head>
<body>
<img src="img/1.jpg" width="500" id="imgId"/>
</body>
</html>
<script type="text/javascript">
 window.onload = function () {

 setInterval(step, 1000);
 }
 var num = 1;
 function step() {
 if (num < 5) {
  num++;
 } else {
  num = 1;
 }
 var dom = document.getElementById("imgId");
 //更改它images的src属性
 dom.src = 'img/' + num + '.jpg';
 }

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Vue中使用vux的配置详解
May 05 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
vue实现文字加密功能
Sep 27 #Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 #Javascript
vue实现购物车小案例
Sep 27 #Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
vue实现移动端省市区选择
Sep 27 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python程序控制NAO机器人行走
2019/04/29 Python
python远程邮件控制电脑升级版
2019/05/23 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python实现一个猜拳游戏
2020/04/05 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
房地产财务管理制度
2014/02/02 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
安全环保标语
2014/06/09 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫